如何將iconfont引入自己的項目


文章轉載於:https://www.cnblogs.com/hjvsdr/p/6639649.html

step 1:找到阿里巴巴矢量圖標庫官網https://www.iconfont.cn,然后注冊登錄,或者用github登錄也行,此步驟跳過;

step 2:找到圖標管理->我的項目->然后新建項目:

右邊點擊新建項目,用於保存自己常用的圖標;

step 3:項目新建完成后,往項目里添加我們要想使用的圖標,找到圖標庫,搜索一個想要的圖標,然后添加到購物車;

 

 我現在將第一個安卓圖標加入我的項目,點擊加入購物車

step 4:添加到購物車完成后,購物車徽章數字應該顯示1了,點擊右上角的購物車圖標,選擇添加至項目,選擇我們剛剛創建的項目,確定;

自動跳轉到對應的項目里了,如圖:

step 5:接下來一部比較關鍵,將打包好的字體文件下載到本地添加到你的項目中,在項目中引用文件中的iconfont.css文件;

下載下來解壓后的文件如下:

強調一次,把上面這些文件都放在一個文件夾內,然后放在你的項目目錄中,再在你的項目中引入iconfont.css文件

 

step 6:到了最后一步了,如何在項目中使用字體圖標呢,其實很簡單,創建一個i標簽或者span標簽,添加兩個類名,一個固定的是iconfont,另一個是你想要的那個圖標對應的類名:

具體代碼如下:

好了,刷新頁面,圖標是不是出來了呢?

Ok,到這一步,恭喜你成功了,是不是很簡單,不簡單?那就從頭再看一遍;

調節字體圖標的大小是通過元素的font-size屬性來控制的;


免責聲明!

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



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