以前網頁上顯示圖標都是用切成小圖片，然后根據不同場景作多個小圖，通過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.htmlGithub:?https://github.com/zavoloklom/material-design-iconic-font

9、Weather Icons

涵蓋了與天氣相關字體圖標官網:?http://erikflowers.github.io/weather-icons/ 與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的bootstrap 一排5个_9个非常实用的CSS图标库的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。