效果

1. 打開iconfont阿里巴巴官網(wǎng)

https://www.iconfont.cn

2. 登錄網(wǎng)站，新建項目

3. 把需要的圖標添加至購物車

4. 打開購物車并選擇添加至剛新建的項目，然后確定

5. 接下來可以在項目中看到你選中的圖標，這時候可以點擊下載至本地

6. 打開下載的zip包就可以看到里面的文件，將里面的文件取出

7. 在vue項目下的assets文件夾下創(chuàng)建icon文件夾，將取出的文件放入這個文件夾下

8. 在main.js中引入

// 引入Iconfont 矢量圖標庫 import './assets/icon/iconfont.css'

9. 在vue項目中使用

<el-menu :default-active="$route.path" :router="true" class="el-menu-demo" mode="horizontal" @select="handleSelect" active-text-color="#409EFF" ><div><img src="@/assets/img/logo.png" class="logo"></div><el-menu-item index="/index"><span class="icon iconfont icon-home"></span><span>主頁</span></el-menu-item><el-menu-item index="#1"><span class="icon iconfont icon-all"></span><span>資源</span></el-menu-item><el-menu-item index="#2"><span class="icon iconfont icon-survey"></span><span>問答</span></el-menu-item><el-menu-item index="#3"><span class="icon iconfont icon-company"></span><span>社區(qū)</span></el-menu-item> </el-menu>

使用 <span class=“icon iconfont icon-home”>,修改的時候只需要修改icon-home這個class就可以了,這個class名稱可以在font class中看到

注意：每次新增圖標后都要覆蓋一次資源文件

總結(jié)

以上是生活随笔為你收集整理的vue项目中使用阿里巴巴矢量图标库iconfont的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。