Bootstrap圖標 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　小圖標icon是一個優秀Web中不可缺少的一部分，起到畫龍點睛的效果。在Bootstrap框架中也為大家提供了250多個不同的icon圖片。本文將詳細介紹Bootstrap圖標

原理分析

　　Bootstrap框架中的圖標都是字體圖標，其實現原理就是通過@font-face屬性加載了字體

@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

　　自定義完字體之后，需要對icon設置一個默認樣式，在Bootstrap框架中是通過給元素添加“glyphicon”類名來實現，然后通過偽元素“:before”的“content”屬性調取對應的icon編碼

.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.glyphicon-asterisk:before {
    content: "\2a";
}

使用

　　所有icon都是以”glyphicon-”前綴的類名開始，然后后綴表示圖標的名稱，詳細情況移步至此，所有圖標都需要一個基類和對應每個圖標的類

　　在網頁中使用圖標非常的簡單，在任何內聯元素上應用所對應的樣式即可

<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-ok"></span>
<span class="glyphicon glyphicon-remove"></span>
<span class="glyphicon glyphicon-plus"></span>
<span class="glyphicon glyphicon-cloud"></span>
<span class="glyphicon glyphicon-heart"></span>

　　為了設置正確的內邊距（padding），務必在圖標和文本之間添加一個空格

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

　　[注意]圖標類最好應用在不包含任何文本內容或子元素的元素上。圖標類不能和其它組件直接聯合使用。它們不能在同一個元素上與其他類共同存在。應該創建一個嵌套的 <span> 標簽，并將圖標類應用到這個 <span> 標簽上

可訪問性

　　現代的輔助技術能夠識別并朗讀由 CSS 生成的內容和特定的 Unicode 字符。為了避免屏幕識讀設備抓取非故意的和可能產生混淆的輸出內容（尤其是當圖標純粹作為裝飾用途時），為這些圖標設置了 aria-hidden="true" 屬性。

　　如果使用圖標是為了表達某些含義（不僅僅是為了裝飾用），請確保所要表達的意思能夠通過被輔助設備識別，例如，包含額外的內容并通過 .sr-only 類讓其在視覺上表現出隱藏的效果。

　　如果所創建的組件不包含任何文本內容（例如， <button> 內只包含了一個圖標），應當提供其他的內容來表示這個控件的意圖，這樣就能讓使用輔助設備的用戶知道其作用了。這種情況下，可以為控件添加 aria-label 屬性

<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>