上一篇《ionic（mui、elementUI）自定義字體圖標(biāo)》寫一部分了。重要的點(diǎn)，再強(qiáng)調(diào)一下下。

在阿里媽媽上的項(xiàng)目中編輯相關(guān)屬性：

elementUI 的前綴是el-icon,Font Family是element-icons；

然后下載下來的代碼就不需要怎么改了，和ionic圖標(biāo)有所區(qū)別的是：

ionic的圖標(biāo)有3套，分別對應(yīng)于iOS和安卓以及windows，所以它的css字體圖標(biāo)要添加相關(guān)適配，

不同的設(shè)備，配置不同樣式的圖標(biāo)，可以說是很6了呀。

而elementUI就一套，所以不麻煩。我的做法比較簡單，直接引用了原有的css如下圖：

因?yàn)?#xff0c;vue項(xiàng)目的文件入口時(shí)App.vue,所有的css,js文件都需要在main.js中引入，可以直接再main.js文件中引入字體文件

的iconfont.css,我不是這樣做的，我是在assets文件夾下建了一個(gè)less文件夾，里面包含了index.less文件和variable.less文件，

然后在index.less文件里引入的iconfont.css,同時(shí)main.js中引入了index.less。如下圖：

main.js文件

應(yīng)用：

效果圖：

嗯，終于整理完了，哈哈，大概沒有什么遺漏吧，不過要注意一下，字體css文件的引入問題！！！

不要搞錯(cuò)了，有什么不懂的，歡迎私信，啦啦啦啦~~~~

總結(jié)

以上是生活随笔為你收集整理的elementUI自定义字体图标的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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