vue中引入iconfont阿里巴巴矢量圖標

1.訪問iconfont阿里巴巴矢量圖標圖官網,把需要的圖標添加入庫

在這裏插入圖片描述

2.去到購物車,把需要的圖標添加到項目

【若沒有項目,可新建】
在這裏插入圖片描述
在這裏插入圖片描述

3.在我的項目中,把圖標代碼下載到本地

在這裏插入圖片描述

4.在vue項目中的src -> assets文件夾下新建iconfont文件夾,把剛纔下載的代碼包裏的iconfont.css、iconfont.eto、iconfont.svg、iconfont.ttf、iconfont.woff複製到iconfont文件夾下

在這裏插入圖片描述

5.在main.js中全局引入iconfont.css
import './assets/iconfont/iconfont.css'
6.在項目中使用
<i class="iconfont icon-huanbao"></i>
7.效果如下

在這裏插入圖片描述

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