阿里矢量圖標庫的使用


1、注冊登錄賬號

網站地址:https://www.iconfont.cn/

該網站可通過GitHub或新浪賬號進行登錄

下面是網站的首頁

2、查找圖標

在中間輸入框輸入想要查找的圖標,。以‘home’為例,點擊搜索,即可得到以下頁面。

3,將圖表添加至項目。

選中自己需要的圖標,將其添加入庫,這時再點擊頁面右上角的購物車圖標

彈出以下頁面,點擊添加至項目,如果是新建項目,點擊右邊的加號圖標,然后點擊確定

 

 

 

4,在項目中使用圖標

添加至項目后會跳轉至以下頁面,左邊顯示項目的名稱,右上角可以添加項目成員,共享這些圖標。要使用這些圖標的話就需要下載至本地了。

點擊下載至本地,會得到一個壓縮文件,解壓文件,得到以下內容

將上圖5個文件放入項目的目錄下,並在main.js文件中引入css文件。

用瀏覽器打開fontclass.html文件,將圖標的類名添加至 i 標簽即可,如下所示。

<class="iconfont icon-home"></i>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM