Ionic使用Iconfont-阿里巴巴矢量圖標庫

2021-01-12 百度經驗

Ionic有個自己的圖標庫,但是有些需要的圖標還是沒有,下面介紹一下阿里巴巴的矢量圖標庫,在Ionic中如何使用

由於度娘限制,自己百度下載地址吧~

輸入「阿里巴巴矢量圖標庫」百度搜索第一位就是啦

打開網址,你可以選擇右上角的搜索,搜索自己要的圖標,例如美女

再次點擊即可取消,或者在暫存架中滑鼠滑過圖標,圖標右上角有刪除小按鈕也可刪除選中

選擇好要用的圖標後,點擊暫存架的下載至本地,解壓待用

我們下載的圖標可看到了吧,按照demo的步驟,下面我們配置ionic的項目

靜態文件存放目錄,新建font文件夾用來存放字體文件(可自定義存放)

挑選相應圖標並獲取字體編碼,應用於頁面就可以顯示圖標啦

大家發現,Ionic的圖標只要加個類似ion-happy  ion-XXX的class就可以應用相應的圖標,那麼我們怎麼用阿里巴巴的矢量圖標呢,不要急也有辦法

打開直接解壓的圖標文件中的iconfont.css文件

將那些.icon-XXX:before{content:'XXXX'}也複製到你的css文件中去

看過ionic css文件源碼的童鞋,是不是看到這些有點熟悉呢

那就對啦,只要在class中加 iconfont  icon-XXX就可以使用圖標了

小編自己動手做了一個demo,下載了一些星座的表情的天氣的還有其他的,發現個bug,就是Chrome調試星座、內衣還有雨傘的圖標不能顯示,放自己的android手機上就可以顯示。如果小夥伴還有其他的不能顯示的話不用奇怪,可以反映給他們官方微博

相關焦點

  • 免費矢量圖標素材資源網站,您一定會有需要(建議收藏)
    做設計、自媒體的朋友們,以及腦圖愛好者,一定有過到處找矢量圖標資源的經歷,現在為大家推薦幾個免費的矢量圖標素材資源網站,對提高生產力很有幫助。一、Iconfont-阿里巴巴矢量圖標庫連結:https://www.iconfont.cn/Iconfont主頁面Iconfont擁有超過962萬的免費矢量圖標素材,是由阿里巴巴體驗團隊傾力打造的中國第一個最大且功能最全的矢量圖標庫,提供矢量圖標下載、在線存儲、格式轉換等功能。支持關鍵字搜索。
  • 阿里巴巴免費素材猜想 未來能提供免費圖片嗎?
    撰文/藍科技用戶對阿里巴巴的要求越來越高。繼阿里提供免費素材平臺——iconfont之後,廣大網友有些「得寸近尺」,希望阿里巴巴在打造一個免費、開放的圖片庫平臺。我們先看一下iconfont平臺具有哪些功能,到底能做什麼。作為以「分享數據的第一平臺」為願景的阿里巴巴打造了一個免費提供素材的平臺——iconfont,背後的出品人是阿里巴巴。這是國內一款功能強大,且圖標內容非常豐富的矢量圖標庫,免費提供矢量圖標下載、在線存儲、格式轉換等功能。
  • 除了阿里巴巴圖標庫你還知道哪些?
    CSS Icons一個可免費下載的圖標庫,您可以輕鬆地將它們用於開發項目。CoreUl Icons一組免費的高級設計圖標,含有Webfont, Raster和SVG多種格式。IconMonstr在這個免費圖標網站上,可共找到313個新種類及4496多個免費圖標。Jam Icons這個圖標庫提供了896個免費圖標,可快速下載使用。
  • 巧妙使用圖標,讓你的PPT變得更精緻!
    但在使用填充圖標的時候,要注意圖標填充色和PPT主題色的搭配,使用不恰當會導致畫面看起來彆扭:3.質感圖標質感圖標通常以寫實擬物的形式表現,通過光影的變化去表現圖標的質感。相比前兩種扁平風格比較明顯的圖標,質感圖標的適用範圍不大,一般只用在一些特定主題的PPT中。了解了圖標的不同「形態」後,同學們在使用圖標的時候要記得注意圖標的統一性了。
  • PPT乾貨 使用高逼格的icon讓你的PPT更好看
    關於PPT製作過程中,獲取圖標的問題,大家各有高招。今天剛哥給大家分享的技巧,絕對簡單粗暴,好用得不要不要的。 推薦網站:iconfont.cnIconfont是由阿里巴巴UED團隊創建的一個矢量技術交流學習分享的平臺,同時為廣大用戶提供矢量圖標存儲、字體圖標轉換的平臺。平臺上有海量的官方公開圖標和設計師分享的圖標。
  • 高清矢量圖標哪裡找?看這3個網站就夠了
    如何方便快捷獲得高質量圖標呢?今天分享 3 個最常用、最方便、最簡單的矢量圖標下載網站,提供高清、大量的矢量圖標。注意:能否商用?根據不同網站說明,部分圖標可商用,本文提供的矢量圖標下載網站僅供個人學習使用,如需商用請聯繫原作者。
  • 一做PPT就全網找圖標,是你嗎?快停吧,以後有這三個網站就夠了
    在PPT的製作過程中,圖標的使用是很重要,但它常被人忽視掉,很多人不會有意識地去使用,甚至認為它可有可無。這裡放一張對比圖片,大家可以來感受一下使用圖標和不使用的區別。巧妙的使用圖標,會讓PPT的表達更直觀,更有辨識度,更具設計感。今天就為大家介紹三個橘將軍平日最常用的圖表網站,快收藏吧!
  • 我從阿里圖標官網,學到了這3個PPT圖標排版指南!附贈1萬枚圖標
    前幾天,在阿里巴巴矢量圖標庫下載小圖標的時候,發現了很多有意思的小圖標:不管是形狀,還是顏色,都很引人入勝!那麼,問題來了,我們拿到這些小圖標後,該怎麼使用在PPT中呢?有很多讀者反應,不知道給怎麼對下載的圖標調整顏色!更改圖標顏色更改圖標顏色,我這裡總結了兩種方法,一種是很常規的方法,不過有點複雜,一種是藉助插件實現,很簡單,很快速!值得注意的是,都需要下載SVG格式的圖標!
  • Feather Icon - 簡單漂亮的免費開源圖標庫
    一套面向設計師和開發者,功能性強、風格高度一致的免費開源圖標庫。介紹Feather 是一套面向設計師和開發者的開源圖標庫,是一個簡單漂亮的開源圖標庫。官網截圖特點每一枚圖標都是按照統一標準進行設計,具有完美像素對齊;設計風格一致,完勝那些拼湊混搭的圖標庫;覆蓋多種開發場景的支持,對開發者非常友好。
  • (乾貨分享)免費可商用的圖標庫
    自製圖標雖然更細緻與整體畫面會更搭一點但是平時忙起來自製圖標就會有些麻煩了這些圖標庫精美還免費它們的內存很小,可與所有主流的瀏覽器,演示文稿和電子郵件兼容,並且不需要任何特殊的插件或庫,可免費應用於個人及商業項目。
  • 9 萬多張矢量圖標資源,更適合亞洲人使用 | 領客專欄 · 電腦...
    5 個專業圖庫到了現在,經過兩年多的時間,我自己慣用的免費圖庫也持續增加、更新,像是找優質圖片的 AI 搜尋引擎 ,還有擁有 90 萬免費 ICON 圖標的下載搜尋引擎 等。EverypixelIcon NinjaA 君註:在公眾號 AppSo 後臺回復「PPT」可獲取以上在線素材庫。那麼,有沒有找到其他比我當初介紹的矢量圖庫更好的選擇呢?
  • Bootstrap Icons - bootstrap 專用的漂亮開源圖標庫,可以免費商用
    專門為著名的前端開發 UI 框架 Bootstrap 的組件和文檔定製開發的圖標庫。介紹Bootstrap 圖標庫 的設計初衷是與 Bootstrap 組件配合使用,從表單到導航組件等。Bootstrap 圖標庫 全部是 SVG 文件格式,能夠輕鬆快捷地進行縮放,保證清晰,並可以通過 CSS 設置顏色。雖然 Bootstrap 圖標庫 是為 Bootstrap 而開發的,但也可以應用在任何項目。
  • 配圖不求人,900萬+高質量圖標在這裡
    大家好,這裡是小夫百寶箱,今天給大家介紹一個矢量圖標網站——Iconfont從事 UI 設計、網頁設計還是平面設計的小夥伴們都會遇到圖標設計的需求,甚至我們日常做PPT中也會需要用到圖標來搭配文字,那有沒有高質量的圖標網站呢
  • 263款歐美插畫漫畫人物圖標等矢量素材打包下載
    2、100套UI界面PSD源文件打包下載(來自100daysui.com)3、1200+食物照片素材PSD分層源文件可編輯4、最新國外圖標資源《Ballicons 3》打包下載5、幻彩等距視圖圖標《Griso Illustration Kit 1 》 打包下載6、iPhone 7和iPhone 7 Plus兩套展示模型源文件打包分享