不二如是 发表于 2023-6-20 20:42:54

07 - 图标库



在网页设计中一定要使用风格一致的图标，这样才能够让用户更加明确网站的主题，从而提高用户与网站的亲密度。

从 Bootstrap 4 开始，图标库从 Bootstrap 项目中分离出来，并成了一个单独的项目 Bootstrap Icons 开始独立发展。

目前最新的版本是v1.10.0：


官网：传送门

它拥有近 1300 个图标，是免费的、高质量的开源图标库。

可以在任何项目中使用，而不局限于在使用 Bootstrap 的项目中使用。

鱼油们可以自己去 Bootstrap Icons 官网下载图标库，也可以用这个：

下载后得到压缩包 bootstrap-icons-1.10.5，解压后的文件目录结构：



font 文件夹中包含相应的字体文件 bootstrap-icons.woff 和 bootstrap-icons.woff2。

以及使用字体图标所需要的样式文件 bootstrap-icons.css 等。

使用字体图标的方式非常简单，只需要将 bootstrap-icons.css 引入 HTML，然后加入 fonts：

<link rel="stylesheet" href="css/bootstrap-icons.css">



备份包：

如果懒得下载，还可以在线调用：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
大家根据需要灵活选择引入方式。

本地化注意：

bootstrap-icons.css文件和字体文件的相对路径与下载文件夹中的相对路径须保持一致。
然后找到相应的图标类 bi-* 并将其添加到 <i> 标签中即可：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BootStrap5-图文教程</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <!-- 本地引入才能用icons -->
    <!-- <link rel="stylesheet" href="css/bootstrap-icons.css"> -->
    <!-- 在线调用 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
</head>

<body>

    <i class="bi-0-circle-fill"></i>
    <i class="bi-1-square"></i>
    <i class="bi-123"></i>
    <i class="bi-chat-dots-fill"></i>
    <i class="bi-chat-dots-fill text-primary"></i>
    <i class="bi-chat-dots-fill fs-2"></i>
    <button class="btn btn-primary">
      按钮
      <i class="bi-apple"></i>
    </button>

    <script src="js/bootstrap.js"></script>
</body>

</html>
效果：



既然是字体，那我们就能够设置它的大小和颜色等。

除了使用字体图标，还可以使用 SVG 。下载源码包后就能在 icons 文件夹中包含所有图标对应的SVG矢量图。

示例：
<img src="/icons/bi-apple.svg" alt="chat" class="text-primary">
还是那句话：

大家按需使用即可。

这位鱼油，如果喜欢本帖子，请订阅>>> 专辑 <<<（不喜欢更要订阅{:10_278:} ）

官方 Web 课程：

https://www.bilibili.com/video/BV1QW411N762

zhangjinxuan 发表于 2023-6-20 21:00:05

Bootstrap5 好好玩

Ewan-Ahiouy 发表于 2023-6-20 21:00:43

Bootstrap5 好好玩

myd0311 发表于 2023-6-20 21:02:21

Bootstrap5 好好玩

myd0311 发表于 2023-6-20 21:02:42

Bootstrap5 好好玩

yinda_peng 发表于 2023-6-20 21:18:40

Bootstrap5 好好玩@夏季的春秋

sfqxx 发表于 2023-6-20 21:32:42

Bootstrap5 好好玩

Jane7 发表于 2023-6-20 21:52:45

Bootstrap5 好好玩

琅琊王朝 发表于 2023-6-20 22:07:40

领鱼币！个人认为直接引入svg是最简单妥当的

歌者文明清理员 发表于 2023-6-20 22:45:16

Bootstrap5 好好玩

数码小逸 发表于 2023-6-20 22:47:03

Bootstrap5 好好玩

hornwong 发表于 2023-6-21 00:20:05

Bootstrap5 好好玩

wangxiangtan2 发表于 2023-6-21 08:21:39

Bootstrap5 好好玩<img src="/icons/bi-apple.svg" alt="chat" class="text-primary">

tomok 发表于 2023-6-21 08:42:36

Bootstrap5 好好玩

Heng_Xin 发表于 2023-6-21 15:24:41

{:10_256:}

myd0313 发表于 2023-6-21 20:00:27

zhangjinxuan 发表于 2023-6-20 21:00
Bootstrap5 好好玩

Bootstrap5 好好玩

myd0313 发表于 2023-6-21 20:00:58

zhangjinxuan 发表于 2023-6-20 21:00
Bootstrap5 好好玩

Bootstrap5 好好玩

Wei-Yuanzhe 发表于 2023-6-21 21:10:15

Bootstrap5 好好玩

Dwwwtl 发表于 2023-6-23 23:41:22

Bootstrap5 好好玩

落花盈满绣！ 发表于 2023-6-23 23:58:37

Bootstrap5 好好玩
页: [1] 2 3
查看完整版本: 07 - 图标库