解决本地Bootstrap字体图标不可见的问题

Myth丶恋晨 2023-06-05 12:31 30阅读 0赞

#### 原文：https://www.jianshu.com/p/70ac459d33e7 ####

作为Bootstrap的初学者，我最近遇到了一个问题：在使用Bootstrap字体图标时，图标不可见。使用代码如下：

在网页上的显示结果如下：

![1067173-20190731105606115-751920116.png][]

OK图标没有显示出来

我的Bootstrap文件是下载到本地使用的，引用代码正确，其他功能正常使用。后来，看了网上的建议，使用远程引用Bootstrap文件能够解决问题，即在引用代码时，使用：

在网页上显示的结果果然正确了，如下：

![webp][]

OK图标正常显示

那么为什么本地引用不能正常显示图标，而远程引用能够正常显示呢？后来我终于知道了答案，并且找到了解决办法。  
首先，还是使用本地引用Bootstrap文件，即：`<link rel="stylesheet" href="css/bootstrap.css">`，此时，我的文档结构是这样的：

![1067173-20190731110244455-181584993.png][]

文档结构

整个网页代码在t1.html中编写。  
其次，对于t1.html中的代码， `<span class="glyphicon glyphicon-ok"></span>`，我按住command键(我用的是mac，IDE是WebStorm，Windows用于应该按住ctrl键），鼠标点击 `glyphicon`，找到它引用的Bootstrap中的原始代码，结果如下：

![webp 1][]

glyphicon在Bootstrap中引用的源代码

此时，大家注意到没有，@font-face中的../fonts/glyphicons-halflings-regular.eot等两个文件有红色的下划线，我鼠标移动到上面，WebStorm给的提示是：can't resolve file glyphicons-halflings-regular.eot。现在，问题已经相当明显了，就是我本地缺失字体引用文件。  
问题清楚了，解决办法就简单了。大家在官网上下载Bootstrap的源文件包中，肯定包含一个fonts的文件夹，其中有5个文件，如下：

glyphicons-halflings-regular.eot
    glyphicons-halflings-regular.woff glyphicons-halflings-regular.svg glyphicons-halflings-regular.woff2 glyphicons-halflings-regular.ttf 源包下载地址：输入https://getbootstrap.com/ ----> 选择版本3.3.7 ---->然后下载（其中就有font文件） 如图所示：

![1067173-20190731101255770-1197919687.png][]

![1067173-20190731101301348-1102822271.png][]

![1067173-20190731101307323-965238468.png][]

解决办法就是将fonts文件夹复制到我的代码文档中，与bootstrap.css的父文件夹同级，如下图所示：

![1067173-20190731105501693-789174749.png][]

增加了fonts文件夹后的文档结构

一切顺利，此时我能够在网页上看到我引用的图标了：

![webp 2][]

本地图标正常显示

总结：在远程引用Bootstrap文件时，很多细节都被遮蔽住了，本地引用Bootstrap文件能够暴露与解决很多问题，值得慢慢研究。

转载于:https://www.cnblogs.com/likui-bookHouse/p/11274971.html

[1067173-20190731105606115-751920116.png]: /images/20230601/468a922a4df44d20a6947a51683cbe90.png
[webp]: /images/20230601/89eac6d47d1c40508a9ebdb38132a931.png
[1067173-20190731110244455-181584993.png]: /images/20230601/9a8c446d5eff4afc85b556f334a88f56.png
[webp 1]: /images/20230601/d8f52322f7284e578e392bbb88377637.png
[1067173-20190731101255770-1197919687.png]: /images/20230601/0fc580ee2ca84116acaa379c2f3e6c6d.png
[1067173-20190731101301348-1102822271.png]: /images/20230601/03cc4491e9a747e7a125b3909cde0617.png
[1067173-20190731101307323-965238468.png]: /images/20230601/97ad4d1b3d8445ed902c5e05a442da88.png
[1067173-20190731105501693-789174749.png]: /images/20230601/57835659d14a41f4937c1bcb520501d1.png
[webp 2]: /images/20230601/97f0f102982a4baaab6f875a237dc709.png