Bootstrap框架中的字形圖標的理解

最近項目中準備使用 Bootstrap 框架，看中了Ace Admin 這套皮膚，看其代碼的時候，發現使用了字形圖標。下面內容來源於網絡，根據本身對新知識的學習曲線從新整合了一下：

一，字形圖標的定義和產生緣由：

字形圖標（Glyphicons）是在 Web 項目中使用的圖標字形。雖然，Glyphicons Halflings 須要商業許可，可是您能夠經過基於項目的 Bootstrap 來無償使用這些圖標。

爲了表示對圖標做者的感謝，但願您在使用時加上 GLYPHICONS 網站的連接。（原文）

以往作web頁面圖標時，都是採用的gif或者png的透明格式對圖標進行處理。這些圖標體積小、數量多，雖然使用css sprite能夠解決請求數和圖片體積的問題，可是這些圖標的大小是固定的。並且在透明度的處理上，始終沒法那麼的完美，尤爲是用在具備調換背景色功能的 頁面中，該缺陷更是明顯。

與圖片圖標相比，字形圖標的優點就要大的多。因爲字形圖標是矢量圖，所以不管將其放大多少倍均可以保持其最原始的形態，不會出現模糊與變形的問題。其次是字形圖標不用考慮如何處理透明度的問題，並且字形圖標能夠經過css樣式來修改它的顏色，使其更容易操控與改變。

整體來講，字形圖標因爲其矢量性很是適合用在當今流行的響應式頁面設計中。尤爲是在移動設備的展示效果上尤其突出。(原文)

二，字形圖標vs圖片圖標的優點與弱勢：(查看原文請移步：原文)

字形圖標除了圖像清晰度以外，比位圖還有哪些優點呢?
一、輕量性：一個圖標字形比一系列的圖像（特別是在Retina屏中使用雙倍圖像）要小。一旦圖標字形加載了，圖標就會立刻渲染出來，不須要下載一個圖像。能夠減小HTTP請求，還能夠配合HTML5離線存儲作性能優化。

二、靈活性：圖標字形能夠用過font-size屬性設置其任何大小，還能夠加各類文字效果，包括顏色、Hover狀態、透明度、陰影和翻轉等效果。能夠在任何背景下顯示。使用位圖的話，必須得爲每一個不一樣大小和不一樣效果的圖像輸出一個不一樣文件。

三、兼容性：網頁字形支持全部現代瀏覽器，包括IE低版本。詳細兼容性能夠點擊這裏。

除了以上優點以外，固然也有劣勢
一、圖標字形只能被渲染成單色或者CSS3的漸變色，因爲此限制使得它不能普遍使用。
二、使用版權上有限制，有好多字形是收費的。固然也有不少免費開源的精美字形圖標供下載使用。
三、創做自已的字形圖標很費時間，重構人員後期維護的成本偏高。

三，如何獲取圖標字形及使用

要想獲取圖標字形，不外乎兩種途徑，其一找到付費網站購買，其二就是到免費網站下載，提供免費下載網站不少，神飛曾經發表過一篇博客icon font大搜羅，上面羅列好多的免費網站的地址，你們有興趣能夠去下載。如何使用呢？通常來講，有3種方法：
一、把字符直接寫在HTML文件裏；
這個方法是簡單比較直觀，見以下代碼，用一個<span>元素去包含一個字符「!」(或&#x0021;)，而後給這個<span>添加一個類。這個字母在選定的字形中被映射到一個特定的圖標。

<a href=」javascript:;」><span cass=」icon」>!</span>贊</a><a href=」javascript:;」><span cass=」icon」>&#x0021;</span>贊</a>

爲了顯示效果，還須要編寫樣式類.Icon來決定此字符以哪一種字形來顯示，以下：

.icon {font-family: ‘ your-incofont -name ‘;}

二、使用css來生成內容；
它不直接在HTML文件裏添加字符，而是用CSS來生成字符內容。代碼以下

<a href=」javascript:;」 class=」icon praise」>贊</a>

能夠看出，添加了一個類名「praise」。神奇的事就發生在CSS中，跟上面同樣，第一步先定義好字形，而後使用:before僞元素來產生字符圖標，其中「before」表示字符出如今左邊，「after」則出如今右邊。

.icon {font-family:’ your-incofont-name’ ;}.praise:before {content: 「\f00a」; }

三、用data-icon屬性
還有一種跟上面類似方法是使用HTML5的「data-」屬性。如：建立一個data-icon屬性。
aria-hidden=」true」是爲了防止被閱讀器直接把字符讀取出來，不是對全部的平臺都奏效。

<a href=」javascript:;」><span aria-hidden=」true」 data-icon=」!」></span>贊</a>

結合一些搭配使用的CSS屬性，能夠寫成以下代碼

[data-icon]:before {font-family: ‘ your-incofont-name’; content: attr(data-icon);speak:none;}

四，Bootstrap中字形圖標的列表：

Font Awesone  : http://fontawesome.io/cheatsheet/
Glyphicons　　 : http://www.w3cschool.cc/try/demo_source/bootstrap3-glyph-icons.htm
Google　　　　 :沒找到，呵呵。

五，部分推薦的資源：

1，Iconfont-阿里巴巴矢量圖標庫 ;

2，Font Awesome

六，待完善環節：

上述知識並不全面，還須要一些補充，如：

1，字形中文的問題；

2，如何製做自定義圖標字形：能夠看這篇文章：連接；