马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
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">
<!-- 本地引入才能用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">
这位鱼油，如果喜欢本帖子，请订阅>>> 专辑 <<<（ 不喜欢更要订阅 ）
官方 Web 课程：
| 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2023-6-20 20:42:54
置顶卡
千斤顶
显身卡
发表于 2023-6-20 21:00:05
发表于 2023-6-20 21:18:40
