缓解当地Bootstrap字体图标不可知的题目

作为Bootstrap的初学者,我多年来遇见了一个问题:在使用Bootstrap字体图标时,图标不可知。使用代码如下:

在网页上的展示结果如下:

OK图标没有显得出来

我的Bootstrap文件是下载到本地利用的,引用代码不易,其余功效正常使用。后来,看了网上的提出,使用远程引用Bootstrap文件可以解决问题,即在引用代码时,使用:

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">

在网页上突显的结果果然没错了,如下:

OK图标正常展现

那么为何本地引用不能够正常展现图标,而远程引用可以健康彰显呢?后来自己毕竟通晓了答案,并且找到精通决办法。
先是,依然使用当地引用Bootstrap文件,即:<link rel="stylesheet" href="css/bootstrap.css">,此时,我的文档结构是那般的:

文档结构

全方位网页代码在t1.html中编写。
其次,对于t1.html中的代码,`,我按住**command**键(我用的是mac,IDE是**WebStorm**,Windows用于应该按住**ctrl**键),鼠标点击glyphicon`,找到它引用的Bootstrap中的原始代码,结果如下:

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

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

充实了fonts文件夹后的文档结构

一切顺遂,此时自己力所能及在网页上观察自身引用的图标了:

本地图标正常显示

统计:在长距离引用Bootstrap文件时,很多细节都被遮蔽住了,本地引用Bootstrap文件可以揭示与解决许多题目,值得逐步研究。

相关文章