在bootstrap中有自有包含一種字體圖標glyphicon，基本能夠滿足大部分的UI要求。這里簡單總結一下其使用方法。

官網給出的使用要求如下：
1. 圖標類不能和其它組件直接聯合使用。它們不能在同一個元素上與其他類共同存在。應該創建一個嵌套的 span 標簽，并將圖標類應用到這個 span標簽上。
2. 圖標類只能應用在不包含任何文本內容或子元素的元素上。
3. 避免 屏幕識讀設備抓取非故意的和可能產生混淆的輸出內容（尤其是當圖標純粹作為裝飾用途時），我們為這些圖標設置了 aria-hidden=”true” 屬性。
4. …

這里經測試，除span外也可以使用i標簽，兩者在沒有內容時無太多差別：
- span標簽被用來組合文檔中的行內元素
- i 標簽呈現斜體的文本

常用使用：
1. 改變glyphicon的大小，使用font-size屬性，最小為12px，再小無變化。
2. 改變glyphicon的顏色，使用color屬性。
以下為測試代碼：

<i class="glyphicon glyphicon-search" aria-hidden="true"></i> <i class="glyphicon glyphicon-search" aria hidden="true"></i> <!--css--> <style>.glyphicon{font-size:12px;color: red;}.glyphicon2{font-size:6px ;} </style>

中間有一個小插曲，我在測試時使用BootCDN時，顯示不出來，我更換了官網的CDN源后使用正常。
兩者對比入下:

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" >

3. 重置其glyphicon等樣式，類似代碼如下。、

/*less 語法*/ .icon-default-styles(@top, @left) {width: 15px;height: 15px;background: url(@common-icons-sprite) @top @left no-repeat;&, &:before, &:after {//關鍵代碼，關閉bootstrap自動加入的iconcontent: none;} } .glyphicon-warning-sign {.icon-default-styles(-52px, -132px); }

總結

以上是生活随笔為你收集整理的bootstrap中的glyphicon问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。