在vue中如何使用阿里图标

vue项目中使用阿里图标

前提，下载代码

​ 先下载阿里图标https://www.iconfont.cn

​ 选择自己想要的图标，添加入库

使用方法

• 先安装依赖包，否则会报错

  npm install css-loader --save
  

• 将包下载后，放入assets文件夹下，修改名称为iconfont（可以不修改，仅为规范）

• 修改文件夹下的iconfont.css文件，把src路径修改为相对路径

@font-face {font-family: "iconfont";
  src: url('./iconfont.eot?t=1580794978615'); /* IE9 */
  src: url('./iconfont.eot?t=1580794978615#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('./data:application/x-font-woff2;') format('woff2'),
  url('./iconfont.woff?t=1580794978615') format('woff'),
  url('./iconfont.ttf?t=1580794978615') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('./iconfont.svg?t=1580794978615#iconfont') format('svg'); /* iOS 4.1- */
}

• 将图标引入全局使用，在main.js中引入iconfont.css样式

  import './assets/iconfont/iconfont.css'
  

• 最后 打开demo_index.html，复制图标类名可以使用了

  <span class="iconfont icon-xxx"></span>