阿里巴巴IconFont的圖標的下載使用

• 前言
• 阿里巴巴矢量圖標使用步驟

前言

接著上一篇《Vue實現圖片驗證碼、郵箱驗證碼以及Cookie記住我功能》，這篇文章主要給大家介紹下阿里巴巴矢量圖標在Vue項目中的使用。Element UI中的圖標本來就少，再加上可以滿足用戶需求的圖標更是少之又少了。因此為了能更好的開發我們的Web項目，我們便采用了阿里巴巴矢量圖標。阿里巴巴矢量圖標官網

阿里巴巴矢量圖標使用步驟

1. 進入官網搜索你想要的矢量圖標
2. 選擇你想要的矢量圖標,添加入庫
3. 點擊右上角的購物車圖標，將你選好的矢量圖標添加到項目
沒有倉庫的自己新建一個：
首頁->資源管理->我的項目->新建項目
4. 進入資源管理->我的項目->Symbol->刷新圖標庫->下載至本地
5. 將下載的zip文件解壓

6. 在vue-cli、element-ui項目中，src->assets目錄下新建文件夾iconfont，用于存放下載所得的壓縮包的文件
6. 在項目中的main.js文件，導入iconfont.css樣式，例如：import iconfont from './assets/iconfont/iconfont.css’

7. 在頁面中直接使用即可，例如：
<i class="iconfont iconViid-icon-test2"></i>

el-input輸入框內的使用prefix-icon：

<el-input v-model="code" prefix-icon="iconfont iconanquanjizhi" placeholder="驗證碼"style="width:37%;margin-top:5%;margin-left: 13%;float:left"></el-input>

以上就是《阿里巴巴IconFont的圖標的下載使用》的全部內容了

總結

以上是生活随笔為你收集整理的阿里巴巴IconFont的图标的下载使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。