最简单的Bootstrap4无法使用icon字体图标的解决办法

素颜马尾好姑娘i 2022-10-22 09:19 225阅读 0赞

# Bootstrap4无法使用icon字体图标的解决办法 #

> 最近准备搞个博客项目，css库选择了Bootstrap4，因为之使用Bootstrap3很长一段时间，足够熟悉。但是没想到在使用功能图标时遇到了困难，bootstrap4默认移除了icon字体图标库，所以没法使用。
> 
> 在官网扫视了一下，只看到npm安装图标库的方法，但是我这个是个纯静态页面，也非常简单，不想使用npm，然后习惯性打开百度搜索。搜索出来的结果要么麻烦（直接贴出了整个icon的css文件内容），要么过时（复制bootstrap3的图库到bootstrap4中来使用）。最后还是在官网找到了解决方法。

## 1. 进入官网 ##

进入bootstrap的官方图库网站: [https://icons.bootcss.com/\#install][https_icons.bootcss.com_install]

![d8c2d21e8cceb04474db241acfacff9d.png][]

## 2. 选择【安装】按钮 ##

点击快速访问的 【安装】 链接，进入到安装步骤

![255421c4b867dd0f3cf446129cd9fbf7.png][]

然后选择最右边的`通过公告CDN加载`方式，将标签复制到HTML中即可，具体用法下面有说明

## 3.安装使用 ##

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <title>首頁</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">
      ...
    </head>
      <body>
        ...
        <i class="bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i>
        ...
      </body>
    </html>

## 4.效果 ##

![4dee05a99c70a48e3d6aa0a50caa032b.png][]

## 后记 ##

> 其实方法就在官网中，只不过被下面的图表蒙蔽了双眼，没看见【安装】按钮，还是太过浮躁！！！

[https_icons.bootcss.com_install]: https://icons.bootcss.com/#install
[d8c2d21e8cceb04474db241acfacff9d.png]: /images/20221022/998f3f4b39c54758975f83764fc87964.png
[255421c4b867dd0f3cf446129cd9fbf7.png]: /images/20221022/3f673d3c56c742ed976beb203cc3cf6e.png
[4dee05a99c70a48e3d6aa0a50caa032b.png]: https://img-blog.csdnimg.cn/img_convert/4dee05a99c70a48e3d6aa0a50caa032b.png