这篇文章主要介绍 Bootstrap 图标库的使用方法,毕竟 Bootstrap 是全球十大前端框架之一,说不定哪天弥雅就碰到了呢,所以现在给学习留下一个脚印。
Bootstsrap 简介
Bootstrap 官方图标库随着不断更新,现在已经是拥有超过 1600+图标的免费且质量高的开源 icons,而且使用范围并不局限在 Bootstrap 前端框架项目。
接入 Bootstrap icons
通过软件包管理工具安装
通过 npm 或 Composer 来安装 Bootstrap 图标库,其中包括 SVG 格式的图标、sprite 图标和图标字体。
npm i bootstrap-icons
composer require twbs/bootstrap-icons
通过下载安装包安装
Bootstrap 已经在 GitHub 上有发布版本,并且在压缩包内包含了所有 SVG 格式的图标、许可证和 readme 文件。package.json
文件也被包含在内,不过这些 npm 脚本主要用于我们的开发流程。
通过 CDN 加载
Bootsteap icons 官方有提供公共 CDN 服务,我们可以利用 CDN 加载直接放置到 HTML 的 <head>
标签内,也可以通过 css 里 @import
指令加载。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");
Bootstrap 图标库用法
Bootstrap icons 的所有图标都是 SVG 格式的,因此通过多种方式将图标添加到 HTML 中。
【注】建议设置 width: 1em
(以及可选的 height: 1em
),便于通过 font-size
属性重置图标的大小。
HTML 内嵌
将图标直接嵌入 HTML 页面中,还可以对 width
和 height
属性进行设置。
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-emoji-heart-eyes" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M11.315 10.014a.5.5 0 0 1 .548.736A4.498 4.498 0 0 1 7.965 13a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .548-.736h.005l.017.005.067.015.252.055c.215.046.515.108.857.169.693.124 1.522.242 2.152.242.63 0 1.46-.118 2.152-.242a26.58 26.58 0 0 0 1.109-.224l.067-.015.017-.004.005-.002zM4.756 4.566c.763-1.424 4.02-.12.952 3.434-4.496-1.596-2.35-4.298-.952-3.434zm6.488 0c1.398-.864 3.544 1.838-.952 3.434-3.067-3.554.19-4.858.952-3.434z"/></svg>
利用 SVG sprite
利用 SVG sprite 和 <use>
元素插入图标。
使用图标的文件名作为片段标识符(例如 toggles
就是#toggles
)。SVG sprites 允许你像元素一样引用外部文件,并支持 currentColor
的功能以便主题化。
【注】在 chrome 浏览器中, <use>
不能跨域使用。
<svg class="bi" width="32" height="32" fill="currentColor">
<use xlink:href="bootstrap-icons.svg#heart-fill"/>
</svg>
<svg class="bi" width="32" height="32" fill="currentColor">
<use xlink:href="bootstrap-icons.svg#toggles"/>
</svg>
<svg class="bi" width="32" height="32" fill="currentColor">
<use xlink:href="bootstrap-icons.svg#shop"/>
</svg>
当成外部图片引用
<img src="/assets/img/bootstrap.svg" alt="Bootstrap" width="32" height="32">
通过<i>实现
Bootstrap 图标库提供了图标字体文件,并且包括每个图标及其对应的 class 名称。
通过在页面中引入图标字体文件,然后根据需要为 HTML 标签添加对应的 class 名称即可。
使用 font-size
和 color
样式属性可以更改图标的外观。
<i class="bi-alarm"></i>
<i class="bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i>
通过 CSS
在 CSS 中使用 SVG 图标(当指定十六进制颜色值时务必对某些字符进行转义,例如将 #
字符替换为 %23
)。
如果未指定 <svg>
元素的 width
和 height
属性,则图标将填满所有可用空间。
如果需要使用 background-size
来调整图标的大小,则必须设置 viewBox
属性。请注意,xmlns
属性是必需的。
.bi::before {
display: inline-block;
content: "";
vertical-align: -.125em;
background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z' clip-rule='evenodd'/></svg>");
background-repeat: no-repeat;
background-size: 1rem 1rem;
}
设置样式
可以通过设置 .text-*
类或自定义 CSS 来改变颜色。
<svg class="bi bi-exclamation-triangle text-success" width="32" height="32" fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
...
</svg>
关于 SVG 的提醒
Bootstrap icons 官方是推荐 SVG 的,因为 SVG 的确是挺棒的技术,但使用中或多或少还是会碰到一些问题,目前已知问题:
- 在 IE 和 旧版本的 Edge 浏览器中 SVG 可以获取焦点。 在嵌入 SVG 时,请为
<svg>
元素添加focusable="false"
属性。 - 当 SVG 与
<img>
元素一起使用时,屏幕阅读器可能不会将它们视为图片来处理,也可能会完全跳过这类图片。 为<img>
元素设置role="img"
可以避免此类问题。 - 引用外部的 SVG sprites 图可能在 IE 浏览器中无法正常使用。 请根据需要使用 svg4everybody polyfill。
还没有人赞赏,快来当第一个赞赏的人吧!
- 2¥
- 5¥
- 15¥
- 20¥
- 25¥
本文来自弥雅投稿,不代表深云太熹中文网立场,版权归原作者所有,欢迎分享本文,转载请保留出处!
内容反馈