如何將阿里圖標庫的引入項目中?

阿里圖標庫官網:https://www.iconfont.cn/

(1)方法一:通過下載png類型的圖片,使用image標籤來使用圖標

 

 

 

(2)方法二:使用字體圖標方式

1)選中icon,並添加到購物車

2)點擊右側購物車,將icon添加到新建項目中即可

3)將字體圖標下載到本地

 

4)將下載下來的iconfont.css文件添加到項目中

(只保留iconfont.css文件時,其他的url都得刪除,只留下一個base64得url ,否則項目報錯,找不到文件;如果不刪,所有文件都得導入)

 

 

 

5)在頁面中引入字體圖標

@import '../../common/iconfont.css'; // 引入字體圖標得文件 

//text標籤和i 標籤都可以使用 (小程序中)
<text class="iconfont icon-002-lock"></text>
 <i class="iconfont icon-001-courthouse"></i>

效果展示:

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章