Bootstrap圖標

本文轉載於:猿2048網站➼Bootstrap圖標

前面的話

　　小圖標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>