bootstrap的字体图标怎么引入

Posted 2023-05-04

Bootstrap 字体图标引用示例：
<span class="glyphicon glyphicon-wrench"></span>，glyphicon-wrench是一个扳手的图标。

言
小鱼遇到引用引用Bootstrap Glyphicons字体图标不显示的问题。找了半天也不知道是哪里出错了，引用css正常，在本地也可以正常显
示，span换个类名也不显示，只有类名为glyphicon-pencil的可以显示，但是与预期的图标还不一样，好坑爹啊！
原以为跟
bootstrap版本有关系，看官网也木有说明，后来看到bootstrap文件夹下有个fonts子文件夹，貌似文字图标跟这个字体文件夹有着灰常大
的联系，然后就把本地的字体文件夹路径改了，本地的图标果然也不显示了，glyphicon-pencil的图标还可以与预期中的不正确的显示方法显示着
（估计是没引用字体的原因，bootstrap写好了样式，但是没字体所以显示不正确）。

到这里就已经大概能确认是字体文件夹没有或
者是路径错的原因导致图标不显示了，再看网站报错，一串串英文，看不懂~百度一哈，找到了篇文章，是跨域资源的原因，这地方不是太懂。大概意思是别人网站
引用了百度的DNS上的bootstrap，而出现神马资源阻塞，导致字体木有正常加载。携手用的是自己的二级域名存放bootstrap文件，应该不算
是跨域了吧。
这些都是字体图标，不是图片，所以想要设置它的大小，只要设置font-size就可以了，当然颜色也可以随意改变。
例： body
font-family:"glyphicons halflings"; font-size:50px; color:#ff0000;
span:after
content:"\\e136";
火狐字体不支持？服务器字体不支持？值得思考的问题~ 火狐专有hack：
@-moz-document url-prefix() .divh96height:90px; 参考技术A bootstrap引用图标的方法：
1、下载包并解压
在‘elegant_font’文件夹中会发现“html CSS”子文件夹，把它复制到你的项目中（注意，这里可以重命名哦）
2、将连接添加到‘style.css’，html里添加一个图标，内容如下：
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

<link rel="stylesheet" href="path/to/elegant-font/style.css">

可以在你HTML里添加图标，并且使用CSS来更改它们的样式：
<span aria-hidden="true" class="icon_pencil"></span>本回答被提问者和网友采纳

bootstrap glyphicon图标无法显示

如果不注意bootstrap引入css和fonts的规范，则可能会导致bootstrap 在显示glyphicon图标时无法正常显示，显示为方框。

此时可搜索bootstrap.css中的.glyphicon，可发现其大约上下10行左右有引入字体的URL，如下所示：

确保该目录存在即可。

通常出错是因为路径不正确所致。