鱼C论坛

 找回密码
 立即注册
查看: 1890|回复: 40

[技术交流] 07 - 图标库

[复制链接]
发表于 2023-6-20 20:42:54 | 显示全部楼层 |阅读模式

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

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

x
0_1.png

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

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

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

2023-06-20_18-05-20.png
官网:传送门

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

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

鱼油们可以自己去 Bootstrap Icons 官网下载图标库,也可以用这个: bootstrap-icons-1.10.5.zip (1.52 MB, 下载次数: 5, 售价: 2 鱼币)

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

2023-06-20_18-10-26.png

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

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

使用字体图标的方式非常简单,只需要将 bootstrap-icons.css 引入 HTML,然后加入 fonts:
<link rel="stylesheet" href="css/bootstrap-icons.css">

2023-06-20_19-16-14.png

备份包: 归档.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>
效果:

2023-06-20_20-35-53.png

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

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

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

大家按需使用即可。


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


官方 Web 课程:

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2023-6-20 21:00:05 | 显示全部楼层

回帖奖励 +2 鱼币

Bootstrap5 好好玩
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-6-20 21:00:43 | 显示全部楼层

回帖奖励 +2 鱼币

Bootstrap5 好好玩
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-6-20 21:02:21 | 显示全部楼层
Bootstrap5 好好玩
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-6-20 21:02:42 | 显示全部楼层

回帖奖励 +2 鱼币

Bootstrap5 好好玩
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-6-20 21:18:40 | 显示全部楼层

回帖奖励 +2 鱼币

Bootstrap5 好好玩@夏季的春秋
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-6-20 21:32:42 | 显示全部楼层

回帖奖励 +2 鱼币

Bootstrap5 好好玩
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-6-20 21:52:45 | 显示全部楼层

回帖奖励 +2 鱼币

Bootstrap5 好好玩
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-6-20 22:07:40 | 显示全部楼层
领鱼币!个人认为直接引入svg是最简单妥当的
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-6-20 22:45:16 | 显示全部楼层

回帖奖励 +2 鱼币

Bootstrap5 好好玩
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-6-20 22:47:03 | 显示全部楼层

回帖奖励 +2 鱼币

Bootstrap5 好好玩
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-6-21 00:20:05 | 显示全部楼层

回帖奖励 +2 鱼币

Bootstrap5 好好玩
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-6-21 08:21:39 | 显示全部楼层
Bootstrap5 好好玩<img src="/icons/bi-apple.svg" alt="chat" class="text-primary">
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-6-21 08:42:36 | 显示全部楼层

回帖奖励 +2 鱼币

Bootstrap5 好好玩
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-6-21 15:24:41 | 显示全部楼层

回帖奖励 +2 鱼币

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2023-6-21 20:00:27 | 显示全部楼层

Bootstrap5 好好玩
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-6-21 20:00:58 | 显示全部楼层

Bootstrap5 好好玩
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-6-21 21:10:15 | 显示全部楼层

回帖奖励 +2 鱼币

Bootstrap5 好好玩
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-6-23 23:41:22 | 显示全部楼层

回帖奖励 +2 鱼币

Bootstrap5 好好玩
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-6-23 23:58:37 | 显示全部楼层

回帖奖励 +2 鱼币

Bootstrap5 好好玩
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-12-22 15:01

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表