如何使用

出于性能的考慮，所有圖標(biāo)都需要一個(gè)基類和對(duì)應(yīng)每個(gè)圖標(biāo)的類。把下面的代碼放在任何地方都可以正常使用。注意，為了設(shè)置正確的內(nèi)補(bǔ)（padding），務(wù)必在圖標(biāo)和文本之間添加一個(gè)空格。

不要和其他組件混合使用

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

只對(duì)內(nèi)容為空的元素起作用

圖標(biāo)類只能應(yīng)用在不包含任何文本內(nèi)容或子元素的元素上。

改變圖標(biāo)字體文件的位置

Bootstrap 假定所有的圖標(biāo)字體文件全部位于 ../fonts/ 目錄內(nèi)，相對(duì)于預(yù)編譯版 CSS 文件的目錄。如果你修改了圖標(biāo)字體文件的位置，那么，你需要通過(guò)下面列出的任何一種方式來(lái)更新 CSS 文件：

• 在 Less 源碼文件中修改 @icon-font-path 和/或 @icon-font-name 變量。
• 利用 Less 編譯器提供的 相對(duì) URL 地址選項(xiàng)。
• 修改預(yù)編譯 CSS 文件中的 url() 地址。

根據(jù)你自身的情況選擇一種方式即可。

圖標(biāo)的可訪問(wèn)性

現(xiàn)代的輔助技術(shù)能夠識(shí)別并朗讀由 CSS 生成的內(nèi)容和特定的 Unicode 字符。為了避免 屏幕識(shí)讀設(shè)備抓取非故意的和可能產(chǎn)生混淆的輸出內(nèi)容（尤其是當(dāng)圖標(biāo)純粹作為裝飾用途時(shí)），我們?yōu)檫@些圖標(biāo)設(shè)置了 aria-hidden="true" 屬性。

如果你使用圖標(biāo)是為了表達(dá)某些含義（不僅僅是為了裝飾用），請(qǐng)確保你所要表達(dá)的意思能夠通過(guò)被輔助設(shè)備識(shí)別，例如，包含額外的內(nèi)容并通過(guò) .sr-only 類讓其在視覺上表現(xiàn)出隱藏的效果。

如果你所創(chuàng)建的組件不包含任何文本內(nèi)容（例如， <button> 內(nèi)只包含了一個(gè)圖標(biāo)），你應(yīng)當(dāng)提供其他的內(nèi)容來(lái)表示這個(gè)控件的意圖，這樣就能讓使用輔助設(shè)備的用戶知道其作用了。這種情況下，你可以為控件添加 aria-label 屬相。

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

實(shí)例

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

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

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