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