vue中的图标字体引入

Posted dangdanghepingping

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中的图标字体引入相关的知识,希望对你有一定的参考价值。

网址:https://icomoon.io/app/#/select;

特点:样式多,免费

操作:

1.相中的,随便点,不要钱,generat fonts然后download,得到一个压缩文件,解压

2,把style.css放到vue的static里,把font放到asetes里(当然你也可以放在别的地方,只要vue里就可以)。

3,在需要用图标的vue文件的style里引入css文件:@import    ./路径style.css(别忘记改一下style.css里的font路径,否则报错,如果没安装cssloader就安装下)

4,此后,哪里需要图标,只要加一下class名,他们就可以显示。

当然,你还可以在那网址上改标签,edit

以上是关于vue中的图标字体引入的主要内容,如果未能解决你的问题,请参考以下文章

vue项目中使用线上字体图标

vue项目用了iconmood字体图标,pc端可以正常显示,移动端显示异常

vue填坑之引入iconfont字体图标

vue引入iconfont阿里字体图标库以及报错解决

uni-app引入字体图标

在vuejs 中使用Font Awesome字体图标