在 vue 中使用自定义 icon 笔记

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在 vue 中使用自定义 icon 笔记相关的知识,希望对你有一定的参考价值。

参考技术A 编辑 iconfont.css 文件,修改 font-family 字体名称,如 xx-iconfont ,避免与默认的字体库发生冲突,
然后在 assets/css 目录下新建 icon.css 文件 ,

上面 el-icon-xx 中的 xx 为你自定义的名称

最后,就可以在项目中使用自定义的字体文件了。

这个可能是字体文件名称跟原来冲突导致的,假如我们没有使用自定义的名称 xx-iconfont , 而是默认的 iconfont ,那么就可能会出现 icon 不能正确显示的问题。

以上是关于在 vue 中使用自定义 icon 笔记的主要内容,如果未能解决你的问题,请参考以下文章

在Vue中使用svg图标即封装自定义svg-icon标签

如何在Vuetify中添加自定义SVG图标 - Vue

Vue 自定义全局message组件

vue 自定义i标签image

ant-design-vue 使用问题记录

Vue2.0笔记——自定义指令