Bootstrap進階一：Glyphicons 字體圖標

基本組件是Bootstrap的精華之一，其中都是開發者平時需要用到的交互組件。例如：網站導航、標簽頁、工具條、面包屑、分頁欄、提示標簽、產品展示、提示信息塊和進度條等。這些組件都配有jQuery插件，運用它們可以大幅度提高用戶的交互體驗！

1.如何使用

出於性能的考慮，所有圖標都需要一個基類和對應每個圖標的類。把下面的代碼放在任何地方都可以正常使用。注意，為了設置正確的內補（padding），務必在圖標和文本之間添加一個空格。圖標類只能應用在不包含任何文本內容或子元素的元素上。

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

 

2.所有可用的圖標

包括250多個來自 Glyphicon Halflings 的字體圖標。








3.實例

可以把它們應用到按鈕、工具條中的按鈕組、導航或輸入框等地方。

<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 組件中所包含的圖標是用來表示這是一條錯誤消息的，通過添加額外的 .sr-only 文本就可以讓輔助設備知道這條提示所要表達的意思了。

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>