vue引用阿里云iconfont使用icon图标(elementUI图标太少)
方法一(推薦)
1. 進入Iconfont(https://www.iconfont.cn/)
2. 找到自己的項目->更多操作->編輯項目
3. 修改前綴,之后用的時候就可以icon-al-xxxxx(可以修改自己習慣和喜歡的樣式)
4. 點擊Font class,點擊查看在線鏈接,復制下面代碼
5. 進入vue根目錄的Public/index.html,打開文件,將下列代碼添加進去
6. 之后就可以復制代碼,然后像使用elementUI里面一樣使用啦。(例如:icon=“icon-al-yanzhengma2” class=“icon-al-syanzhengma2”),如果沒有顯示,重啟一下項目 npm run serve 。
方法二
1. 進入Iconfont(https://www.iconfont.cn/)
2. 找到自己的項目->更多操作->編輯項目
3. 修改前綴,之后用的時候就可以icon-al-xxxxx(可以修改自己習慣和喜歡的樣式)
4. 將icon文件下載到本地
5. 將下載下來的文件解壓后,找到目錄下的iconfont.css文件,然后做如下修改
6. 將下列iconfoot文件拷貝到項目里面就可以了
8. 在vue的Main.js 里面引入iconfont,在elementUI的css之前引入,我放到之后引入,elementUI的icon就不顯示了
9. 之后就可以復制代碼,然后像使用elementUI里面一樣使用啦。(例如:icon=“icon-al-yanzhengma2” class=“icon-al-syanzhengma2”),如果沒有顯示,重啟一下項目 npm run serve 。
參考:https://www.jianshu.com/p/a6b54662753b
總結
以上是生活随笔為你收集整理的vue引用阿里云iconfont使用icon图标(elementUI图标太少)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Java生鲜电商平台-团购模块设计与架构
- 下一篇: Jaas demo 登陆验证