如何把阿里圖標庫的圖標生成代碼並應用於自己的項目


有時候需要用很多圖標去完成一定的頁面效果和工作展現,框架內置的圖標可能滿足不了我們的需求,有個很好的圖標庫想必大家都知道-----就是阿里圖標庫。那么我們如何才能夠把阿狸圖標庫的圖標引用到自己的項目中呢?耐着性子往下看吧!
阿里圖標庫地址:https://www.iconfont.cn/
1.根據所需搜索到想要的圖標,鼠標懸停,點擊添加到購物車
1.png
2.點擊購物車
2.png
3.點擊添加至項目
3.png
4.選擇添加到一個項目里面,點擊確定
4.png
5.點擊font class 的選項,可以看到你添加過的圖標,下面的英文對應的是圖標代碼,點擊下載至本地。
5.png
6.你會的到一個download的壓縮包,解壓文件
6.png
7.復制除第一個二文件其余的文件至你的項目資源目錄
7.png
8.引用iconfont.css至你的前端項目 請注意引用文件路徑的正確性。
8.png
9.使用的時候

第一個類名是固定的iconfont 第二個類名是你所需要的類名,取自於fontClass代碼
9.png

10.png


免責聲明!

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



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