vue引入icon图标库的方法

https://www.iconfont.cn/manage/index找到阿里图标库

创建新项目

新建项目------创建----

1)、FontClass/Symbol前缀这个很重要,一定不要写成:el-icon-***这样的形式。

         如果写成这样的前缀,会和element-ui框架所带的图标(icon)冲突,导致你图标显示不出来

2)、fontFamily随便起一个名字,能记住就行

 3)、项目创建完了,你可以往项目里面添加自己想要的图标了, 找到想要的图标添加到购物车,可以通过浏览或者搜索找到自己想要的图标,然后添加到自己的项目,这里有一个坑,千万要记住自己是哪个项目要用,不然弄混麻烦很大,比如我随意找了些图标添加到了我的项目。
--------------------- 

最后在代码中引用,这里采取的是第二种方式:

内联样式加个class 表示,这里有坑二, 记得要加上自己的 FontClass/Symbol前缀 ,不然显示的是小方块,不会报错,再加上这个图标自己的名字,就大功告成。

<i class="icon iconfont travel-gouwucheman"></i> 

也可以采用Unicode的方法,不用图标名字,span 标签内插入 图标的Unicode码

就是类似 &#xe632; 这样的东西,记得加上分号,不然。。。。。  还有把图标名字去掉

跟第一种差不多,不过个人觉得第一种更好理解。看个人喜好。

引入字体文件后,要重启一下服务 ----->  npm run dev  或者  npm run start 

如果按照步骤来还是出现小方块,一定先检查自己的每一步是否正确,还是不行,可以试着改一下旧文件的base64 编码换成新的。或者打开 历览器调试的 networks 看看字体文件有没有加载。
--------------------- 
 

发布了106 篇原创文章 · 获赞 20 · 访问量 11万+

猜你喜欢

转载自blog.csdn.net/gujinapenggu5/article/details/85231666