Bootstrap 字体图标引用示例

Posted 2020-07-12 求学问园

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(){    .divh96{height:90px;} }