vue项目中引用Iconfont矢量图标
最近课设作业中使用vue项目模仿写课堂派，自然会用到许多图片，奈何抠图技术太渣，只好运用Iconfont矢量图标图。用了才知道是真方便。
首先进入 Iconfont 阿里巴巴矢量图标图官网 如图所示：
搜索自己想要找的图，将其加入购物车：
将选好的图标加入到项目中，在项目里面也可编辑自己想要的样式：
项目编辑中还有一点对项目的编辑，在更多操作里面（后面会用到）：
选好编辑好后将项目下载到本地：
将下好的压缩包解压后放在vue项目中，在main.js中引入iconfont.css（这里根据自己放的位置写相对路径引入）：
然后修改iconfont.css，将.iconfont修改为[class^=“test-”],[class*=" test-"],这里的test是第四步中自己定义的
接下来就可以在vue中使用刚刚我们加入到项目中的图标了，父元素需要设为第四步定义的名称，图标大小可通过font-size来调整。
引用图标可使用class引用：
也可使用Unicode引用：
具体效果如下图所示：
小结：第一次写博客，有错误和不完善的地方还请各位指点。希望上面的内容可以帮助到各位，方便各位更加灵活快速的应用到自己的项目中去。
以上是 vue项目中引用Iconfont矢量图标 的全部内容， 来源链接： utcz.com/z/378085.html
