bootstrap(4.6x)图标库的引用

bootstrap(4.6x)图标库的引用

Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 利用业余时间开发的。它基于 Html、Css、JavaScript 于2011 年8月在 GitHub 发布为开源产品。Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑、手机。是全球最受欢迎的前端开源工具库，网上有关图标库的引用的文章不少但真对4.0以上的版本文章却很少，由于4.6x版本与3.0x的引用方式出现了非常大的变化，本章将讨论4.6x图标库的引用

一、下载图标库

与bootstrap3.0x不同的是bootstrap4.6x需要单独下载图库库文件，目前最新版本为v1.8.2
下载地址：https://github.com/twbs/icons/releases/tag/v1.8.2
下载后的图库库文件如图一所示：

下载的文件包括一个fonts和一堆svg文件，如果本地引用需要fonts文件以便直接用于你的项目。下载的文件包括：

• 编译并压缩过的 CSS 集成包
• 编译并压缩过的 JavaScript 插件

二、bootstrap图标库CSS文件的引用

2.1、查找下载文件中的CSS文件

需要注意的是bootstrap4.6x版本的CSS文件隐藏在一堆SVG文件中，这个笔者下载文件后找了半天才知道
如下图二所示：

2.2、HTML文件中引用的CSS文件

2.2.1 复制图标库CSS到项目中

笔者有一个专用的CSS文件夹，想把bootstrap的图标CSS文件复制到这个文件夹下
如图三所示

2.2.1 HTML文件引用

然后在Html文件中引用此Css文件
如图四所示：

三、修改bootstrap图标库CSS文件路径

3.1原bootstrap图标库CSS文件路径

bootstrap图标库CSS文件调用图标文件路径是当前目录下的上一级fons文件夹下（注"./" 代表当前目录，"…/"代表上级目录）相对路径中。由于笔者修改了原bootstrap图标库CSS文件存放路径，这时想要引用图标库文件就要修改CSS文件中的路径。
原bootstrap图标库CSS文件路径 CSS。

@font-face {
  font-family: "bootstrap-icons";
  src: url("./fonts/bootstrap-icons.woff2?08efbba7c53d8c5413793eecb19b20bb") format("woff2"),
url("./fonts/bootstrap-icons.woff?08efbba7c53d8c5413793eecb19b20bb") format("woff");
}

如图五所示：

3.2修改后bootstrap图标库CSS文件路径

注意：CSS文件夹与fonts是同一目录下两个文件夹
如图六所示：

修改后的CSS路径 CSS。

@font-face {
  font-family: "bootstrap-icons";
  src: url("../fonts/bootstrap-icons.woff2?08efbba7c53d8c5413793eecb19b20bb") format("woff2"),
url("../fonts/bootstrap-icons.woff?08efbba7c53d8c5413793eecb19b20bb") format("woff");
}

四、bootstrap图标显示

如图七所示