【工具】分享 9 個非常實用的 CSS 圖標(biāo)庫

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

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

1、Iconfont

阿里巴巴矢量圖標(biāo)庫，Iconfont-國內(nèi)功能很強大且圖標(biāo)內(nèi)容很豐富的矢量圖標(biāo)庫,提供矢量圖標(biāo)下載、在線存儲、格式轉(zhuǎn)換等功能。阿里巴巴體驗團隊傾力打造,設(shè)計和前端開發(fā)的便捷工具。

Iconfont平臺為用戶提供在線圖標(biāo)搜索、圖標(biāo)分撿下載、在線儲存、矢量格式轉(zhuǎn)換、個人圖標(biāo)庫管理及項目圖標(biāo)管理等基礎(chǔ)功能。?

網(wǎng)站：http://www.iconfont.cn/

2、Font Awesome

Font Awesome為您提供可縮放的矢量圖標(biāo)，您可以使用css所提供的所有特性對它們進行更改，包括：大小、顏色、陰影或者其它任何支持的效果。

其特點：

一個字庫，675個圖標(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，而且不會影響到不支持此屬性的瀏覽器。

網(wǎng)站：http://www.bootcss.com/p/cikonss/index.html

4、Glyph Icons

Glyphicons Halflings需要商業(yè)許可，但是可以通過基于項目的Bootstrap來免費使用這些圖標(biāo)，Bootstrap捆綁了200多個字體圖標(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多個字體圖標(biāo)，圖標(biāo)多，有標(biāo)準，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è)計和應(yīng)用一套完整的圖標(biāo)，包括320以上像素完美，手工制作的圖標(biāo)，畫的靈感來自蘋果iOS7公開，100%免費！

官網(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.html

Github:?https://github.com/zavoloklom/material-design-iconic-font

9、Weather Icons

涵蓋了與天氣相關(guān)字體圖標(biāo)

官網(wǎng):?http://erikflowers.github.io/weather-icons/

1. JavaScript 重溫系列（22篇全）
2. ECMAScript 重溫系列（10篇全）
3. JavaScript設(shè)計模式 重溫系列（9篇全）
4.?正則 / 框架 / 算法等 重溫系列（16篇全）
5.?Webpack4 入門（上）||?Webpack4 入門（下）
6.?MobX 入門（上）?||??MobX 入門（下）
7. 80+篇原創(chuàng)系列匯總
回復(fù)“加群”與大佬們一起交流學(xué)習(xí)~
點擊“閱讀原文”查看 80+ 篇原創(chuàng)文章