Iconfont - 設計師/前端開發者必備的圖標管理工具

2020-12-21 那些免費的磚

阿里巴巴旗下阿里媽媽MUX團隊打造的圖標管理平臺。

介紹

這是一個專門為設計師和前端開發者打造的在線工具。設計師將圖標上傳到 Iconfont,可以自定義下載多種格式的icon,也可將圖標轉換為字體,方便前端工程師自由調整與使用。

通過這個免費的工具,設計師不僅可以瀏覽下載大量優秀設計師的圖標作品,還可以管理和展示自己設計的圖標。已經成為很多UI設計師和前端開發者日常工作的必備工具。

大量優質的原創圖標庫

特點

矢量圖標在線存儲管理。設計師繪製的大量圖標都可以上傳,解決了管理和查找圖標非常困難的痛點;按項目管理圖標,支持自定義尺寸和顏色,無論是前端工程師還是UI設計師,再也不用苦逼地切圖搬磚了,需要什麼尺寸,可以在平臺上自行下載;對於開發者來說,可以把需要的矢量圖標以項目的方式管理,一建生成再web上通過css字體控制的矢量圖標,支持在web/h5/小程序/App上調用,使用簡單便捷,再也不需要用模糊的圖片圖標了;對於設計師來說,平臺上有上千上萬設計師分享自己設計的圖標,絕對是圖標設計學習和靈感的利器。

自定義尺寸和顏色,按需下載

使用體驗

作為一款阿里巴巴推出的在線應用,速度絕對是槓槓的,無論是設計師或開發者,使用非常簡單以至於不需要教程。Iconfont 不需要註冊,也不能註冊,只支持新浪或 Github 帳號登錄,如果你不知道 Github,就直接用新浪帳號登錄。

目前我幾乎所有的項目都使用 Iconfont 來管理,它同時也是設計師和前端開發者協同的神器,一旦使用就會發現,畢竟是阿里內部都在使用的應用,操作交互細節非常貼合實際效率的需求。並且Iconfont支持模糊搜索,讓查找圖標變得非常便捷。

免費使用說明

作為一個圖標管理工具,Iconfont 是免費的。

但遺憾的是,平臺上所有的圖標都是阿里巴巴官方項目和平臺上的設計師自行上傳的。如需出於商業目的使用iconfont平臺任意個人公共庫中的任意圖標,均應事先獲得相關智慧財產權權利人的授權,以避免產生不必要的糾紛。

而 iconfont平臺提供的官方圖標庫僅供廣大用戶交流學習使用,未經iconfont或其關聯公司書面授權許可,不得用於任何商業用途。具體可查看 Iconfont 網站左下角的法律聲明。

我也推薦過一些免費商用的高質量矢量圖標庫,比如remix icon。

本專欄已建立同名網站,同步更新設計、前端圈免費開源、可商用資源。

相關焦點

  • 網站前端ICONFONT圖標助力網站設計之WordPress應用
    說到網站建設就不得不提到前端UI與後端程序談到UI就不得不提及美工與設計在當前這個網際網路開放的時代,提到前端美工設計不提及ICONFONT圖標的廣泛應用,那完全是設計界的盲人;什麼是ICONFONT?此種方式適合用在圖標引用特別少,以後也不需要特別維護的場景。比如設計師用來做demo原型。前端臨時做個活動頁。
  • WordPress主題使用Iconfont字體圖標的兩種方法教程
    Iconfont字體圖標在設計中被廣泛應用,在網站中也是必不可少的, 它能應用於網站的各處,例如菜單導航、標題等等,不論是對設計人員,還是對站長來說實用性都是非常大的。Iconfont是 阿里媽媽MUX傾力打造的矢量圖標管理、交流平臺。
  • 設計師之免費圖標網站
    在當下社會,所以與設計有關的都存在版權問題,對於一個設計師來說,圖標的運用還是很多的,今天小編就來說一些對於設計師常用的圖標網站;阿里巴巴圖標庫 (大企業圖標都有)https://www.iconfont.cn/圖標大全(一般你需要什麼輸入什麼都會有)http://www.easyicon.net/
  • Ionic使用Iconfont-阿里巴巴矢量圖標庫
    Ionic有個自己的圖標庫,但是有些需要的圖標還是沒有,下面介紹一下阿里巴巴的矢量圖標庫,在Ionic中如何使用由於度娘限制,自己百度下載地址吧~輸入「阿里巴巴矢量圖標庫」百度搜索第一位就是啦,應用於頁面就可以顯示圖標啦大家發現,Ionic的圖標只要加個類似ion-happy  ion-XXX的class就可以應用相應的圖標,那麼我們怎麼用阿里巴巴的矢量圖標呢
  • vue的for循環中如何在dom中遍歷iconfont圖標
    最近博主在搗鼓一個vue的小項目,想把iconfont的圖標通過v-for遍歷顯示,結果界面顯示效果如下:data中定義的遍歷數組由於使用的是iconfont的Unicode編碼, 顯而易見,出現了列印出來了字符串的現象.
  • 新版微信開發者工具可期:支持PC小程序調試、圖標更新
    據IT之家網友「stevapple」投稿,微信團隊消息,微信開發者工具穩定版 1.02.2003250 近日更新:雲開發支持按量付費、PC小程序調試、圖標更新等。以下為官方更新公告:1. 編輯器優化微信開發者工具的編輯器功能經過重新調整,優化並增加了若干功能。
  • 15個最好的Bootstrap設計工具推薦
    Bootstrap是由前Twitter設計師Mark Otto和Jacob Thornton開發的前端工具包,其提供了優雅的HTML和CSS規範。Bootstrap不單單是一個框架,更確切的說,它改變了整個遊戲規則。該框架使得許多應用和網站的設計開發變得簡便許多,而且它將大量的HTML框架普及成了產品。
  • IE 良心工具:提高開發效率的 F12 開發者工具
    隨著網站複雜程度不斷增加和全新開發技 術的加入,一款功能強大的瀏覽器開發者工具,對於所有的前端開發者來說至關重要。
  • Vue Element使用阿里雲icon圖標
    Element UI 是目前流行的一款前端UI工具。它能配合Vue這個流行的前端框架。安裝使用也簡單:npm i element-ui -S即可。不過美中不足的是自帶的圖標集合不夠用,圖標太少了。element 自帶圖標庫一,註冊阿里雲圖標庫Iconfont,過程自行百度。
  • 咔拉商城之前端使用iocnfont字體圖標
    iconfont字體圖標就是用字體來代替圖標、圖片文件的做法,並且通過字體圖標可以對圖標的大小、顏色等進行控制,但是缺點就是只能實現一種顏色,不能像圖片那樣含有各種顏色。在咔拉商城的評論頁面上有一些圖標,本來是用圖片來做的,但滑鼠放上去沒有效果,給人的體驗不好,所以就去阿里巴巴矢量圖標庫找了一樣的字體圖標來做,可以對字體圖標進行顏色,大小的修改。咔拉商城評論為了給用戶更好的體驗,有下劃線、字體居中,還有表情等選擇。
  • ppt必備神器-透明底小圖標免費下載網站
    今天給大家介紹一個神器網站-iconfonticonfont是阿里巴巴旗下的一個矢量圖標庫,有內容豐富的矢量圖標可以下載使用(免費)。在平時做ppt的時候經常需要用到一些透明底的小圖標來做裝飾或者點綴,這時候我們就可以在iconfont上面來尋找啦。
  • developer盤點Android開發者必備的十大開發工具
    Android SDK提供了一系列可幫助開發者設計、創建、測試和發布Android應用程式的強大工具,以下是來自遊戲邦編譯developer推薦的10款最常用的開發工具。
  • 4款免費圖標素材網站:設計PPT必備
    各式各樣的圖標是很多設計者,和製作PPT的必要元素。下面介紹4種關於圖標的素材網站。1、iconfrontIconfont是國內功能很強大且圖標內容很豐富的矢量圖標庫,提供矢量圖標下載、在線存儲、格式轉換等功能。阿里巴巴體驗團隊傾力打造,設計和前端開發的便捷工具。
  • iconmonstr - 提供超過4000個精緻圖標免費商用的圖標庫網站
    相比於很多簡約簡單的圖標,iconmonstr 的圖標表現力非常豐富,非常適合用在PPT、企業官網設計下的大圖標塊以及 UI 界面上的大圖標模塊,非常地好看。、PNG 和內嵌原始碼等各種格式下載,滿足了設計師和開發者的各種需求場景;iconmonstr 還有提供一套類似於之前推薦的 remix icon的 web 圖標庫 Iconic Font,有超過 300 個小型免費圖標,更加的簡潔精緻,很適合使用於網頁或界面開發。
  • 微信小程序添加icon圖標
    小程序引入阿里圖標的的步驟1、百度一下「阿里圖標庫」2、搜索你想要的圖標3、將項目添加至購物車4、點擊購物車,並點擊「添加至項目5、新建項目名稱,並點擊「暫無代碼,點擊生成」6、上面的選項,選擇Unicode,點擊 「點此複製代碼」7、在APP.WXSS中引入CSS@font-face {font-family: 'iconfont
  • Bootstrap Icons - bootstrap 專用的漂亮開源圖標庫,可以免費商用
    專門為著名的前端開發 UI 框架 Bootstrap 的組件和文檔定製開發的圖標庫。介紹Bootstrap 圖標庫 的設計初衷是與 Bootstrap 組件配合使用,從表單到導航組件等。使用體驗圖標被應用在很多網際網路產品中,開源且提供商用並且好看的圖標庫,真的不多。繪製一個好看表達準確的圖標是非常耗時的,當我第一次看到這款圖標時,覺得很好看,越往下看,發現所有圖標都很好看,想想以後它就是我的了,想怎麼用就怎麼用,充滿了兩眼放光的欣賞性舒適感,這感覺就像撿到一塊大寶一樣。
  • 尋找「圖標」,去點亮你的PPT頁面吧
    圖標的形象性,不僅可以修飾PPT,而且更有助於觀眾對於PPT的理解。圖標的使用需要注意的是:情境正確,一一對應;風格統一,畫風一致。Ps、Ai高手是可以自己繪製的統一符合要求的圖標,而不會這些工具的怎麼辦?我們應該去哪裡找好的圖標呢?這裡,小編一次性把最實用的圖標尋找方法告訴大家。
  • 51WDP開發者平臺五大工具全面開放,讓數字孿生觸手可及!
    沒錯,這就是利用51WDP開發者工具鏈帶來的生產力變革。現在,這一套完整的工具鏈,都可以在升級版的51WORLD開發者計劃(51WDP)中獲取。為了讓數字孿生技術惠及更多行業集成商和開發者,快速提升產品及解決方案競爭力,自2019年底,51WORLD圍繞全要素場景AES,啟動51開發者計劃(51WDP)。
  • 專為電商網站提供的20種免費設計工具
    Colordot Colordot一個用來辨別和保存顏色的簡易工具。只要移動滑鼠到不同的顏色上,點擊一下就能保存顏色。Colordot也有手機app,可以用來創建和分享色板。 Google Fonts Google Fonts(谷歌字體)讓每個人都可以快速簡單地使用網絡字體,包括專業設計師或開發者設計的字體。
  • 3個作圖必備素材網站,免費圖片圖標,一網打盡!
    只要是作圖,必然會面臨一個問題,就是圖片圖標素材從哪找,尤其是微信改版,開始使用深色模板,更加需要在圖片圖標上花費精力,下面就為大家帶來3個作圖必備的素材網站,它們不光種類多樣,還是免費的哦,一起看下吧。