vue项目中引用Iconfont矢量图标

最近课设作业中使用vue项目模仿写课堂派，自然会用到许多图片，奈何抠图技术太渣，只好运用Iconfont矢量图标图。用了才知道是真方便。

• 首先进入 Iconfont 阿里巴巴矢量图标图官网 如图所示：
  

• 搜索自己想要找的图，将其加入购物车：
  

• 将选好的图标加入到项目中，在项目里面也可编辑自己想要的样式：

• 项目编辑中还有一点对项目的编辑，在更多操作里面（后面会用到）：
  

• 选好编辑好后将项目下载到本地：
  

• 将下好的压缩包解压后放在vue项目中，在main.js中引入iconfont.css（这里根据自己放的位置写相对路径引入）：
  
  

• 然后修改iconfont.css，将.iconfont修改为[class^=“test-”],[class*=" test-"],这里的test是第四步中自己定义的
  
  

• 接下来就可以在vue中使用刚刚我们加入到项目中的图标了，父元素需要设为第四步定义的名称，图标大小可通过font-size来调整。

  • 引用图标可使用class引用：
    
    

  • 也可使用Unicode引用：
    
    

• 具体效果如下图所示：
  

• 小结：第一次写博客，有错误和不完善的地方还请各位指点。希望上面的内容可以帮助到各位，方便各位更加灵活快速的应用到自己的项目中去。