[一勺燴]CSS3中常用字體圖標庫總結

字體圖標

以前網頁上顯示圖標都是用切成小圖片，然後根據不同場景作多個小圖，通過JS來控制顯示效果。 字圖圖標，顧名思義，就像使用通常的字體，可以設置字體顏色，大小等，不用在搞多張小圖片，非常靈活。

優點

• 輕鬆的定義圖標的顏色，大小，陰影，和任何與CSS相關的特性。
• 更快的載入速度、樣式更容易定義。
• 使用矢量字體，這意味著他們可以完美的顯示在高解析度顯示器中。

圖標製作說明

• 阿里巴巴UX部門圖標製作說明: http://www.iconfont.cn/help/iconmake.html
• 製作圖標字體字型檔

圖標在H5中使用方法

使用方法在這裡就不記述了，參照下面各字體圖標的example說明

Webfont矢量圖標庫站點總結

阿里巴巴矢量圖標

• 官網: http://www.iconfont.cn/
• 說明: 阿里巴巴UX部門推出的矢量圖標管理網站涵蓋了1000多個常用圖標並還在持續更新中，Iconfont平台為用戶提供在線圖標搜索、圖標分撿下載、在線儲存、矢量格式轉換、個人圖標庫管理及項目圖標管理等基礎功能。同時http://iconfont.cn平台作為矢量圖標倡導者，積極在線分享矢量圖標製作經驗、前端應用說明，及應用中常見的一些問題。
• 推薦理由: 涵蓋了有1000多個常用圖標，持續更新。咱國人，支持是必須的。

Font Awesome

• 官網: http://fontawesome.io
• Github: https://github.com/FortAwesome/Font-Awesome/
• 說明: Font Awesome為您提供可縮放的矢量圖標，您可以使用CSS所提供的所有特性對它們進行更改，包括：大小、顏色、陰影或者其它任何支持的效果。
• 推薦理由: 更新快，圖標多，覆蓋了很多分類，今天為止大約有634多個（2016/08/07）。

Glyph Icons

• 官網: http://glyphicons.com/
• Bootstrap: http://getbootstrap.com/components/
• 說明: Glyphicons Halflings需要商業許可，但是可以通過基於項目的Bootstrap來免費使用這些圖標，Bootstrap捆綁了200多個字體圖標。

Simple Line Icons

• 官網: https://thesabbir.github.io/simple-line-icons/
• Github: https://github.com/thesabbir/simple-line-icons
• 說明: 一套線條非常優美的圖標，今天為止大約有186多個（2016/08/07）。

Ionicons

• 官網: http://ionicons.com/
• Github: https://github.com/driftyco/ionicons
• 說明: 一套線條非常優美的圖標，今天為止大約有750多個字體圖標（2016/08/07）。
• 推薦理由: 圖標多，有標準，iOS，Android，社交圖標，圖標非常精美。

Themify

• 官網: http://themify.me/themify-icons
• 說明: Themify圖標是用於網頁設計和應用一套完整的圖標，包括320以上像素完美，手工製作的圖標，畫的靈感來自蘋果iOS7公開，100%免費！

Material Design Iconic Font

• 官網: http://zavoloklom.github.io/material-design-iconic-font/index.html
• Github: https://github.com/zavoloklom/material-design-iconic-font
• 說明: 有提醒，視頻，聯繫，內容，編輯器，硬體，地圖等多種分類圖標，今天為止大約有700多個字體圖標（2016/08/07）。

Weather Icons

• 官網: http://erikflowers.github.io/weather-icons/
• 說明: 涵蓋了與天氣相關字體圖標，今天為止大約有222多個（2016/08/07）。

特記：大家發現比較好的字體圖標庫，跟帖回復，一起來完善資料。

微信公眾號：關注「撈猴」

路漫漫兮修遠，you can you up丨撈猴

推薦閱讀：