以前網頁上顯示圖示都是用切成小圖檔，然後根據不同場景作多個小圖，通過js來控制顯示效果。字圖圖示，顧名思義，就像使用通常的字型，可以設定字型顔色，大小等，不用在搞多張小圖檔，非常靈活。其優點：
- 輕松的定義圖示的顔色，大小，陰影，和任何與css相關的特性。
- 更快的載入速度、樣式更容易定義。
- 使用矢量字型，這意味着他們可以完美的顯示在高分辨率顯示器中。
1、Iconfont
阿裡巴巴矢量圖示庫，Iconfont-國内功能很強大且圖示内容很豐富的矢量圖示庫,提供矢量圖示下載下傳、線上存儲、格式轉換等功能。阿裡巴巴體驗團隊傾力打造,設計和前端開發的便捷工具。
Iconfont平台為使用者提供線上圖示搜尋、圖示分撿下載下傳、線上儲存、矢量格式轉換、個人圖示庫管理及項目圖示管理等基礎功能。
網站：http://www.iconfont.cn/
2、Font Awesome
Font Awesome為您提供可縮放的矢量圖示，您可以使用css所提供的所有特性對它們進行更改，包括：大小、顔色、陰影或者其它任何支援的效果。
其特點：
一個字庫，675個圖示
無需依賴JavaScript
無限縮放
如言語一般自由
css控制
高分屏完美呈現
完美相容其它架構
可用于桌面系統
可适配于螢幕閱讀器
網站：http://fontawesome.dashgame.com/
Github: https://github.com/FortAwesome/Font-Awesome/
3、Cikonss
Cikonss是利用純CSS技術建構的響應式、跨浏覽器的icon，相容IE8+。這意味着必須使用CSS2，是以，可以繪制的形狀或圖形就收到了限制。
某些icon必須有 border-radius 屬性，這主要是為了在支援此屬性的浏覽器上更好的繪制icon，而且不會影響到不支援此屬性的浏覽器。
網站：http://www.bootcss.com/p/cikonss/index.html
4、Glyph Icons
Glyphicons Halflings需要商業許可，但是可以通過基于項目的Bootstrap來免費使用這些圖示，Bootstrap捆綁了200多個字型圖示。
官網: http://glyphicons.com/
5、Simple Line Icons
一套線條非常優美的圖示。
官網: https://thesabbir.github.io/simple-line-icons/
Github: https://github.com/thesabbir/simple-line-icons
6、Ionicons
一套線條非常優美的圖示，今天為止大約有750多個字型圖示，圖示多，有标準，iOS，Android，社交圖示，圖示非常精美。
官網: http://ionicons.com/
Github: https://github.com/driftyco/ionicons
7、Themify
Themify圖示是用于網頁設計和應用一套完整的圖示，包括320以上像素完美，手工制作的圖示，畫的靈感來自蘋果iOS7公開，100%免費！
官網: http://themify.me/themify-icons
8、Material Design Iconic Font
有提醒，視訊，聯系，内容，編輯器，硬體，地圖等多種分類圖示
官網: http://zavoloklom.github.io/material-design-iconic-font/index.html
Github: https://github.com/zavoloklom/material-design-iconic-font
9、Weather Icons
涵蓋了與天氣相關字型圖示
官網: http://erikflowers.github.io/weather-icons/