以前網(wǎng)頁上顯示圖標(biāo)都是用切成小圖片，然后根據(jù)不同場(chǎng)景作多個(gè)小圖，通過js來控制顯示效果。字圖圖標(biāo)，顧名思義，就像使用通常的字體，可以設(shè)置字體顏色，大小等，不用在搞多張小圖片，非常靈活。其優(yōu)點(diǎn)：

• 輕松的定義圖標(biāo)的顏色，大小，陰影，和任何與css相關(guān)的特性。
• 更快的載入速度、樣式更容易定義。
• 使用矢量字體，這意味著他們可以完美的顯示在高分辨率顯示器中。

1、Iconfont

阿里巴巴矢量圖標(biāo)庫，Iconfont-國內(nèi)功能很強(qiáng)大且圖標(biāo)內(nèi)容很豐富的矢量圖標(biāo)庫,提供矢量圖標(biāo)下載、在線存儲(chǔ)、格式轉(zhuǎn)換等功能。阿里巴巴體驗(yàn)團(tuán)隊(duì)傾力打造,設(shè)計(jì)和前端開發(fā)的便捷工具。Iconfont平臺(tái)為用戶提供在線圖標(biāo)搜索、圖標(biāo)分撿下載、在線儲(chǔ)存、矢量格式轉(zhuǎn)換、個(gè)人圖標(biāo)庫管理及項(xiàng)目圖標(biāo)管理等基礎(chǔ)功能。?網(wǎng)站：http://www.iconfont.cn/

2、Font Awesome

Font Awesome為您提供可縮放的矢量圖標(biāo)，您可以使用css所提供的所有特性對(duì)它們進(jìn)行更改，包括：大小、顏色、陰影或者其它任何支持的效果。其特點(diǎn)：一個(gè)字庫，675個(gè)圖標(biāo)
無需依賴JavaScript
無限縮放
如言語一般自由
css控制
高分屏完美呈現(xiàn)
完美兼容其它框架
可用于桌面系統(tǒng)
可適配于屏幕閱讀器網(wǎng)站：http://fontawesome.dashgame.com/Github:?https://github.com/FortAwesome/Font-Awesome/

3、Cikonss

Cikonss是利用純CSS技術(shù)構(gòu)建的響應(yīng)式、跨瀏覽器的icon，兼容IE8+。這意味著必須使用CSS2，因此，可以繪制的形狀或圖形就收到了限制。某些icon必須有 border-radius 屬性，這主要是為了在支持此屬性的瀏覽器上更好的繪制icon，而且不會(huì)影響到不支持此屬性的瀏覽器。網(wǎng)站：http://www.bootcss.com/p/cikonss/index.html

4、Glyph Icons

Glyphicons Halflings需要商業(yè)許可，但是可以通過基于項(xiàng)目的Bootstrap來免費(fèi)使用這些圖標(biāo)，Bootstrap捆綁了200多個(gè)字體圖標(biāo)。??官網(wǎng):?http://glyphicons.com/

5、Simple Line Icons

一套線條非常優(yōu)美的圖標(biāo)。官網(wǎng):?https://thesabbir.github.io/simple-line-icons/Github:?https://github.com/thesabbir/simple-line-icons

6、Ionicons

一套線條非常優(yōu)美的圖標(biāo)，今天為止大約有750多個(gè)字體圖標(biāo)，圖標(biāo)多，有標(biāo)準(zhǔn)，iOS，Android，社交圖標(biāo)，圖標(biāo)非常精美。官網(wǎng):?http://ionicons.com/Github:?https://github.com/driftyco/ionicons

7、Themify

Themify圖標(biāo)是用于網(wǎng)頁設(shè)計(jì)和應(yīng)用一套完整的圖標(biāo)，包括320以上像素完美，手工制作的圖標(biāo)，畫的靈感來自蘋果iOS7公開，100%免費(fèi)！官網(wǎng):?http://themify.me/themify-icons

8、Material Design Iconic Font

有提醒，視頻，聯(lián)系，內(nèi)容，編輯器，硬件，地圖等多種分類圖標(biāo)官網(wǎng):?http://zavoloklom.github.io/material-design-iconic-font/index.htmlGithub:?https://github.com/zavoloklom/material-design-iconic-font

9、Weather Icons

涵蓋了與天氣相關(guān)字體圖標(biāo)官網(wǎng):?http://erikflowers.github.io/weather-icons/ 與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。