【工具】分享 9 個非常實用的 CSS 圖標庫

2021-02-13 前端自習課

以前網頁上顯示圖標都是用切成小圖片，然後根據不同場景作多個小圖，通過js來控制顯示效果。字圖圖標，顧名思義，就像使用通常的字體，可以設置字體顏色，大小等，不用在搞多張小圖片，非常靈活。其優點：
輕鬆的定義圖標的顏色，大小，陰影，和任何與css相關的特性。使用矢量字體，這意味著他們可以完美的顯示在高解析度顯示器中。1、Iconfont阿里巴巴矢量圖標庫，Iconfont-國內功能很強大且圖標內容很豐富的矢量圖標庫,提供矢量圖標下載、在線存儲、格式轉換等功能。阿里巴巴體驗團隊傾力打造,設計和前端開發的便捷工具。Iconfont平臺為用戶提供在線圖標搜索、圖標分撿下載、在線儲存、矢量格式轉換、個人圖標庫管理及項目圖標管理等基礎功能。 網站：http://www.iconfont.cn/2、Font AwesomeFont Awesome為您提供可縮放的矢量圖標，您可以使用css所提供的所有特性對它們進行更改，包括：大小、顏色、陰影或者其它任何支持的效果。一個字庫，675個圖標
無需依賴JavaScript
無限縮放
如言語一般自由
css控制
高分屏完美呈現
完美兼容其它框架
可用於桌面系統
可適配於屏幕閱讀器網站：http://fontawesome.dashgame.com/Github: https://github.com/FortAwesome/Font-Awesome/3、CikonssCikonss是利用純CSS技術構建的響應式、跨瀏覽器的icon，兼容IE8+。這意味著必須使用CSS2，因此，可以繪製的形狀或圖形就收到了限制。某些icon必須有 border-radius 屬性，這主要是為了在支持此屬性的瀏覽器上更好的繪製icon，而且不會影響到不支持此屬性的瀏覽器。網站：http://www.bootcss.com/p/cikonss/index.html4、Glyph IconsGlyphicons 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-icons6、Ionicons一套線條非常優美的圖標，今天為止大約有750多個字體圖標，圖標多，有標準，iOS，Android，社交圖標，圖標非常精美。Github: https://github.com/driftyco/ionicons7、ThemifyThemify圖標是用於網頁設計和應用一套完整的圖標，包括320以上像素完美，手工製作的圖標，畫的靈感來自蘋果iOS7公開，100%免費！官網: http://themify.me/themify-icons8、Material Design Iconic Font有提醒，視頻，聯繫，內容，編輯器，硬體，地圖等多種分類圖標官網: http://zavoloklom.github.io/material-design-iconic-font/index.htmlGithub: https://github.com/zavoloklom/material-design-iconic-font9、Weather Icons涵蓋了與天氣相關字體圖標官網: http://erikflowers.github.io/weather-icons/

回復「加群」與大佬們一起交流學習~

點擊「閱讀原文」查看 80+ 篇原創文章

相關焦點

  • 9個非常實用的CSS圖標庫
    字圖圖標，顧名思義，就像使用通常的字體，可以設置字體顏色，大小等，不用在搞多張小圖片，非常靈活。其優點：輕鬆的定義圖標的顏色，大小，陰影，和任何與css相關的特性。使用矢量字體，這意味著他們可以完美的顯示在高解析度顯示器中。
  • 15 個有趣的 JavaScript 與 CSS 庫
    、加載效果、工具提示的純 CSS 解決方案。使用起來也十分簡單，當你點擊了某一個圖標，便會彈出圖標對應的 HTML 與 CSS 代碼，同時你可以直觀的了解到 CSS 代碼的什麼部分，實現了圖標的哪些元素。　　如此棒的項目，是不是得給滿分呢？快來 Enjoy吧！HERE：http://cssicon.space/　9.
  • 22 個用於網站設計的 CSS 庫
    今天我們將分享22個關於網站設計的CSS庫，希望對您的學習與網站設計、網站開發有所幫助
  • 10個實現炫酷UI設計效果的CSS生成工具
    根據設計領域的最新趨勢，我選擇了10個值得你關注的CSS生成工具，以幫助你構建漂亮炫酷實用的UI界面。
  • 10個可視化 CSS 工具, 快速生成 CSS 片段,渣男,又想拋棄我!!
    今天繼續推薦提高我們摸魚時間的幾個神器，相信我，你會愛上他們的。
  • 10個可視化 CSS 工具, 快速生成 CSS 片段!!
    Neumorphism地址：https://neumorphism.io/#e0e0e0這個網站為 section 或 div 生成對應UI，它也可以自定義border-radius, box-shadow 等。2.
  • 手把手教你打造一個純CSS圖標庫
    在web開發中，我們經常要用到一些小圖標（加減勾叉等）。通常做法就兩種：直接使用圖片；使用css/svg直接在瀏覽器中繪製圖標。方案1：由於圖標圖片比較多，而且體積很小，為了減少請求所以很多時候我們會用雪碧圖這種技術來將圖標拼湊在同一張圖片裡面。
  • 15 個有趣的 JS 和 CSS 庫
    當然，如果你也發現了一些有趣、實用的庫，框架或是工具，也歡迎留言與大家一同分享。1.CurrencyDevices.css 是一個使用純 CSS 實現行動裝置的庫。它包含了一些目前主流的行動裝置，如 iPhone X，Google Pixel 2 XL 和三星Galaxy S8。
  • 這11個有趣的 CSS 和 JavaScript 庫太實用了!
    地址：https://css.sitetent.com/8.Anchorme小巧、快速、高效、功能豐富的 Javascript 庫，用於檢測文本中的連結/URL/電子郵件並將它們轉換為可點擊的 HTML 連結。
  • 不可錯過的實用前端工具
    給大家整理了 25 個前端相關的學習網站和一些靠譜的小工具● 1CSS Battle - 在線比拼 CSShttps://cssbattle.dev在線比拼 CSS ，一個挺有趣的競爭性遊戲，一共有12個級別，需要你用 HTML和 CSS 100%還原它給出的頁面
  • 乾貨 · 12 個非常實用的 jQuery 代碼片段
    jQuery是一個非常流行而且實用的JavaScript前端框架，所以，今天萌小妹給大家分享12個jQuery實用代碼片段
  • 7個實用的 Vue.js 工具和庫
    /源碼，裝滿你的收藏夾，每天分享一個小技巧，讓你輕鬆節省開發效率，實現不加班不熬夜不掉頭髮，是我的目標。1: Nuxt.jsGithub stars: 28.9k網站：https://nuxtjs.org/
  • 你應該知道的9個優秀的CSS框架
    來自：碼農網本文連結：http://www.codeceo.com/article/9-css-framework.html
  • 推薦15個 JavaScript 和 CSS 庫
    英文： Georgi Georgiev   譯文：為之漫筆/眾成翻譯zcfy.cc/article/15-interesting-javascript-and-css-libraries-for-january
  • CSS之字體圖標知多少
    正如你所看到的，現在市面上大多數網頁使用的圖標都是類似這樣的形式，也有不少icon圖標庫可供我們使用，它的實現方式有：1、Icon Font2、CSS Sprites3、使用image4、SVG（目前來看，是最完美的）5、CSS手寫icon（太麻煩，而且自己做往往不好看（這時候你需要一個UI小姐姐的幫助））
  • 【工具】推薦 12 個學習前端必備的神仙級工具類項目與網站
    網址描述unbug.github.io/codelf變量命名智能推薦（支持中文）www.docschina.orgWeb 前端開發人員提供優質中文文檔regexr.com正則表達式驗證匹配any-rule正則表達式庫，非常全，使用起來很方便www.toptal.com/developers多張圖片合成雪碧圖，並生成對應 csstool.lu眾多工具集合，包括時間戳轉換，進位轉換等www.bootcdn.cn
  • UI庫(CSS+HTML)
    經驗分享: 入門階段不要管好那麼多細節,記憶之類的東西,儘快地入門才是最重要的.其實入門,無非就是對所學內容形成一套概念,知其然,所以然.大概的就成了.盒子模型，個人的理解，就是一個來裝html標籤的容器,包裝的內容包括content+padding+border+margin。由這四個組成我們的"盒子"。
  • 12個圖標資源網站,有哪些分享圖標資源的網站?
    04Iconfonthttps://www.iconfont.cn/Iconfont是一個阿里巴巴矢量圖標庫，這是國內功能很強大且圖標內容很豐富的矢量圖標庫，提供矢量圖標下載、在線存儲、格式轉換等功能。
  • 前端開發實用工具網站清單整理(二)
    /CSS3 UI 庫 http://css3lib.alloyteam.com/#progress_bar/demo2一份非常完整的網頁CSS速查表 http://lesliefranke.com/files/reference/csscheatsheet.html
  • 10個非常實用的CSS技巧
    -4d8b2a5dcea1翻譯 | 楊小二在開發交互式用戶界面時，級聯樣式表 (CSS) 非常棒且非常強大。CSS 非常強大，為我們提供了許多可以實現此功能的方法。舉個例子，你想在你的內容上提供一個圖像光標。要實現此操作，你需要提供如下代碼片段。h1{ cursor:url("custom.gif"), auto;}5、為列表標記設置樣式你是否厭倦了普通默認的的列表樣式，CSS 可以實現一些炫酷的列表的樣式效果。