bootstrap解决引入本地Bootstrap文件字体图标无法显示问题

bootstrap引入的字体图标无法显示原因有两个。

一、版本问题

bootstrap新版本4.5，无法显示图标
它的显示效果是这样的：

4.5版本.PNG

下载1.PNG

下载2.PNG

下载3.PNG

3、解压完成
4、引用

二、引用问题

在不能正常显示的时候，比如我要在一个按钮中使用一个“博士帽”的字体图标，我的代码是这样子的：

只放css.PNG

因为我把bootstrap.css文件和html放在同一级目录下

文件路径.PNG

这时候浏览器是表示无法获取文件的，会这样显示：

2.PNG

字体图标的样式，是关联着这些文件的，进入到下载的整个的压缩包，进入这个文件bootstrap-3.3.7-dist\fonts，就会发现如下文件：

6.png

必须要关联到glyphicons-halflings-regular.eot等文件才能正常使用。
而在我的引用bootstrap文件中，我是这样引用的，可能你也正在犯跟我一样的错误：

<link rel="stylesheet" href="bootstrap.css">

在使用bootstrap的大多样式的时候，单单是bootstrap.css这个文件就够了，不必引入全部的，这样可以让我们的项目没那么臃肿。但是在我们使用字体图标的时候，是需要关联到字体图标相关的文件才得以实现的，所以当我引入整个bootstrap-3.3.7（您也可以部分引入，只要将你想要的功能的相关文件全部引入且目录无误即可），然后再在我的html中这样引入：

<link rel="stylesheet" href="../libs/bootstrap-3.3.7/css/bootstrap.css">

这样就能正常显示了~

正常.png