阿里巴巴IconFont的圖標(biāo)的下載使用

• 前言
• 阿里巴巴矢量圖標(biāo)使用步驟

前言

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

阿里巴巴矢量圖標(biāo)使用步驟

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

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

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

el-input輸入框內(nèi)的使用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的圖標(biāo)的下載使用》的全部內(nèi)容了

總結(jié)

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

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