07 - 图标库

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

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

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

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

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

官网：传送门

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

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

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

bootstrap-icons-1.10.5.zip (1.52 MB, 下载次数: 5, 售价: 2 鱼币)

下载后得到压缩包 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">

复制代码

备份包：

归档.zip (201.57 KB, 下载次数: 0, 售价: 3 鱼币)

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

<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">
<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">

复制代码

还是那句话：

大家按需使用即可。

这位鱼油，如果喜欢本帖子，请订阅>>> 专辑 <<<（不喜欢更要订阅

）

官方 Web 课程：

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

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 好好玩

账号		自动登录	找回密码
密码			立即注册

[技术交流] 07 - 图标库

马上注册，结交更多好友，享用更多功能^_^

本帖被以下淘专辑推荐:

回帖奖励 +2 鱼币

回帖奖励 +2 鱼币

回帖奖励 +2 鱼币

回帖奖励 +2 鱼币

回帖奖励 +2 鱼币

回帖奖励 +2 鱼币

回帖奖励 +2 鱼币

回帖奖励 +2 鱼币

回帖奖励 +2 鱼币

回帖奖励 +2 鱼币

回帖奖励 +2 鱼币

回帖奖励 +2 鱼币

回帖奖励 +2 鱼币

回帖奖励 +2 鱼币