Bootstrap缓解地方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文件能够暴露与缓解许多题目,值得慢慢研究。

相关文章