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;} }