字體圖標

字體圖標

剛開始作網頁的時候，都用UI提供的圖片作背景、圖標等等。但是當頁面中圖標過多時，不易管理，又很佔地方。雖然能夠使用合併方法將圖標合成一張圖片，但是在寫css時就須要逐必定位。

而字體圖標對於前端開發來講更加方便，脫離了UI的限制，本身能夠修改圖標的大小、顏色等等。而圖標使用時一般都會有觸發事件修改圖標顏色的狀況，若是使用圖片的話就須要製做兩個顏色的圖標，用於替換，而字體圖標能夠很簡單的解決這個問題。

1. 阿里巴巴矢量圖標庫iconfont

阿里的字體圖標庫，提供的圖標可在線編輯（修改大小、顏色）、下載以及創建本身的字體圖標庫，支持三種格式代碼的使用，簡易的在線編輯/替換。

• unicode引用 即便用相應字體圖標的編碼
• font-class引用 即便用相應字體圖標的classname
• symbol引用 這種用法實際上是作了一個svg的集合

具體使用方法可參考官網教程，或網上的教程，例如這位的博客。

2.一套絕佳的圖標字體庫和CSS框架Font Awesome

Font Awesome的字體圖標也是身邊人比較經常使用的，我還沒用過，具體使用方法在網站首頁的「起步」中能夠看到。