:9個非常實用的CSS圖標庫-知識庫免费ppt模版下载-道格办公
投稿
  1. JustNews首頁
  2. 知識庫
  3. 9個非常實用的CSS圖標庫

9個非常實用的CSS圖標庫

作者: 道格資源 • • 知識庫 • 瀏覽量 867

非常實用的CSS圖標庫確實可以幫助我們輕鬆地添加圖標到網頁中，而無需使用圖片或JavaScript。以下是9個非常實用的CSS圖標庫：1. Font Awesome (https://fontawesome.com/) Font Awesome是一個非常流行的圖標庫，提供了數千個矢量圖標，可以直接通過CSS類來使用。它支持多種風格和大小，可以自定義顏色、旋轉和動畫。 2. Material Icons (https://material.io/resources/icons/) Material

以前網頁上顯示圖標都是用切成小圖片，然後根據不同場景作多個小圖，通過js來控制顯示效果。字圖圖標，顧名思義，就像使用通常的字體，可以設置字體顏色，大小等，不用在搞多張小圖片，非常靈活。其優點：
  • 輕鬆的定義圖標的顏色，大小，陰影，和任何與css相關的特性。
  • 更快的載入速度、樣式更容易定義。
  • 使用矢量字體，這意味著他們可以完美的顯示在高分辨率顯示器中。

1、Iconfont

阿里巴巴矢量圖標庫，Iconfont -國內功能很強大且圖標內容很豐富的矢量圖標庫,提供矢量圖標下載、在線存儲、格式轉換等功能。阿里巴巴體驗團隊傾力打造,設計和前端開發的便捷工具。
Iconfont平台為用戶提供在線圖標搜索、圖標分撿下載、在線儲存、矢量格式轉換、個人圖標庫管理及項目圖標管理等基礎功能。
網站：http://www.iconfont.cn/

2、Font Awesome

Font Awesome為您提供可縮放的矢量圖標，您可以使用css所提供的所有特性對它們進行更改，包括：大小、顏色、陰影或者其它任何支持的效果。
其特點：
一個字庫，675個圖標
無需依賴JavaScript
無限縮放
如言語一般自由
css控制< br >高分屏完美呈現
完美兼容其它框架
可用於桌面系統
可適配於屏幕閱讀器
網站：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< /section>

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/

文章為用戶上傳，僅供非商業瀏覽。發布者：Lomu，轉轉請註明出處： https://www.daogebangong.com/zh-Hant/articles/detail/9%20very%20practical%20CSS%20icon%20libraries.html

贊 (810)
打賞 支付宝扫一扫 支付宝扫一扫
Lomu 王梓力 專欄作者
48 196
single-end

相關推薦