作者:WangMin
格言:努力做好自己喜歡的每一件事
CSDN原創(chuàng)文章
博客地址 👉 WangMin

所有可用的圖標(biāo)

包括250多個(gè)來自 Glyphicon Halflings 的字體圖標(biāo)。例如下圖的一些字體圖標(biāo)，更多的字體圖標(biāo)請(qǐng)見boostrap官方文檔 。

---

如何使用字體圖標(biāo)

出于性能的考慮，所有圖標(biāo)都需要一個(gè)基類（glyphicon）和對(duì)應(yīng)每個(gè)圖標(biāo)的類。為了設(shè)置正確的內(nèi)補(bǔ)（padding），必須在圖標(biāo)和文本之間添加一個(gè)空格。

注意：

1 . 不要和其他組件混合使用
圖標(biāo)類不能和其它組件直接聯(lián)合使用。它們不能在同一個(gè)元素上與其他類共同存在。應(yīng)該單獨(dú)創(chuàng)建一個(gè)嵌套的<span>標(biāo)簽，并將圖標(biāo)類應(yīng)用到這個(gè)<span>標(biāo)簽上。

2 . 只對(duì)內(nèi)容為空的元素起作用
圖標(biāo)類只能應(yīng)用在不包含任何文本內(nèi)容或子元素的元素上。

3 . 圖標(biāo)的可訪問性
為了避免 屏幕識(shí)讀設(shè)備抓取非故意的和可能產(chǎn)生混淆的輸出內(nèi)容，特別是當(dāng)圖標(biāo)純粹作為裝飾用途時(shí),要給這些圖標(biāo)設(shè)置了aria-hidden="true"屬性；如果你使用圖標(biāo)是為了表達(dá)某些含義（不僅僅是為了裝飾用），請(qǐng)確保你所要表達(dá)的意思能夠通過被輔助設(shè)備識(shí)別，例如，包含額外的內(nèi)容并通過.sr-only類讓其在視覺上表現(xiàn)出隱藏的效果。使用方法如下：

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

---

實(shí)例

可以把它們應(yīng)用到按鈕、工具條中的按鈕組、導(dǎo)航或輸入框等地方。

<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-plus" aria-hidden="hidden"></span> </button> <button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-search" aria-hidden="hidden"></span> </button>

alert 組件中所包含的圖標(biāo)是用來表示這是一條錯(cuò)誤消息的，通過添加額外的.sr-only文本就可以讓輔助設(shè)備知道這條提示所要表達(dá)的意思了。

<div class="alert alert-danger" role="alert"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span><span class="sr-only">Error:</span>錯(cuò)誤信息提示 </div>

---

就先分享到這里!! 😄 后續(xù)繼續(xù)更新!!

總結(jié)

以上是生活随笔為你收集整理的Bootstrap 组件：Glyphicons 字体图标的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。