在vue中使用阿里iconfont图标。

转自个人博客

http://www.zuidaima.com/blog/4421067481730048.htm

 

1.www.iconfont.cn，去阿里下的这个网址去搜索并选择自己喜爱的图标，图片非常全，非常好用，非常....词汇量少，不知道怎么吹了，不得不感叹这些UI小姐姐太牛皮了​，注意咯，看到自己喜爱的图标，收藏到自己的购物车里边（见图1）。

​（图1）​

2.点完之后，你会神奇的发现右上角购物车图标角标变咯，​。

3.点击你的购物车看看，见图二。​，​。

4.你要给你自己创建一个项目，把这you love的图标保存到你的项目里。

5.完事你就能看到图三了，有时候它会出来一行红字，具体什么我就不写了，忽略点一个第二个都无所谓。

​图三

6.再接下来就是，下载到本地，本地文件里有这么几个文件，图四

7.用你c+v，或者x+v大发，复制，剪切一份，放到vue的项目中，见图

​。​

  咱们看一下这个iconfont.css下有啥子东西。能让你用它这个图标这么放心嘞。

​

​

8.在你的mian.js中，映入，别告我你找不到mian.js。见下图

 

​

为了节约您宝贵的实际我把代码贴上来

import '@/icon/iconfont.css'

 

8.引入了哈，接下来就去你的想要用图标的文件。​给大家看下xiaohgu效果哦！

​​完事，拜拜！！！

 

 

后来经过测试发下，你想换小图标的时候啊，需要重新生成并且复制放到你iconfont.css下！才能生效！哈哈哈

 

 

 

 

 

 

加入我们群

如果有需要，欢迎可以加入我们的QQ群！（QQ搜索 816175200，加入我们的QQ群吧！）
有任何问题，也可以加入我们的QQ群，欢迎交（che）流（dan）！也欢迎参观我的博客www.aquestian.cn！