Vue项目使用iconfont矢量图标库

1. 引言

        在vue项目中，我们往往为了样式好看，需要加入一些图标，其中elementUI其实给我们提供了一些图标，但这些图标都有一个缺陷，就是放大之后，像素会降低。那么这个时候也就体现了iconfont的好处了，它的特点：虽然显示的是图片的形式，但是本质确是字体，也就具备了font的相关属性，可以调节它的大小，等等属性，非常方便，好处聊完了，下面看看怎么运用它吧！

2. 具体引用步骤

2.1 登录iconfont

        第一步就是登录我们的阿里妈妈矢量图标库的官网https://www.iconfont.cn/

        然后注册登录，我们只需要在主页的中间搜索框进行选取我们需要的图标即可

        

        按照图中步骤，你也可以一次添加多个图标到购物车，然后点击右上角购物车 

2.2 添加到项目 

        图标添加到购物车完成之后，点击添加到项目，点击确定

         如果没有项目，也可以点击自己新建一个项目

2.3 生成在线链接

        一般在添加到项目之后，就会跳转到项目页面，如果没有跳转，也可以在导航栏的资源管理，然后点击我的项目，进入项目页面。

        使用方式选择fontclass，然后生成在线链接

 2.4 在vue项目中引入iconfont

        第一步在vue项目中创建iconfont.css文件（文件名随意）

// 需要注意的是，每次添加购物车图标，在线链接都会改变，所以每次都需要修改以下代码
@import "//at.alicdn.com/t/c/font_4674655_qm56dbwokpb.css"

        第二步在main.js里面引入这个css文件

// 按照自己的css文件目录位置就行
import "@/assets/icon/iconfont.css"

         最后我们就可以在项目中引用我们的图标了

<i class="iconfont icon-gerenzhongxin" style="color: blue"></i>

 3. 总结

        以上就是引用iconfont具体步骤，阿里妈妈的功能还是很强大的！！！