vue使用iconfont,vue引入icon

　　本文主要介绍了iview vue项目中自定义图标的使用方法，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。

　　 1.UI设计师会把自己的logo库上传到阿里巴巴logo库。2.单击添加到购物车中的项目。3.为项目命名。4.将以下文件放入我的项目的静态文件中。5.在main.js中全局介绍iconfont.css6打开刚刚下载的文件中的demo_index.html7。在路上了。从添加图标配置。8.查看结构，发现默认情况下仍然设置了字体系列iview。9.所以改变字体系列的设置。10.这就完美的解决了最近做后台管理系统的问题，是iview vue cli2做的。在做这个的过程中，左侧的导航栏需要添加图标icon，但是iview库中的图标不符合UI要求，需要引入自己的图标库。

1. UI设计师会把自己做的图标库上传到阿里巴巴图标库

　　打开设计师给的图标库地址，点击所有图标添加到购物车。

2. 到购物车中点击添加至项目

3. 给项目起个名字

　　单击确定，然后单击下载到本地。

4. 把下面这些文件放到我的项目的static中

　　在新文件夹图标字体中

5. 在main.js中全局引入iconfont.css

6. 打开刚才下载好的文件里的demo_index.html

　　里面有三种语录。我使用类方法。只需复制下面的类名。

7. 在我的路由中加入icon配置

　　我以为可以正常显示，结果根本不显示。

8. 看结构才发现font-family还是默认的iview设置好的

　　而自己引入的图标需要设置为font-family: iconfont

9. 所以要改变font-family的设置

　　注意这里不能全局设置。当我全局设置它时，不会显示其他iview图标，所以您应该找到对应于左侧导航栏的文件，并将inline style添加到其对应的结构中。

10. 这样就完美的解决了

　　您可以在左侧引入自定义图标，而不会影响在其他地方使用的iview图标。

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。