vuecli3使用阿里巴巴字体图标库

弄了一晚上太坑了！！！！

1.在阿里图标库下载图标

2.下载的解压后，选取四个字体文件

 

 3.在src/assets文件夹下新建一个叫iconfont的文件夹，把这个四个字体文件放进去

4.在src/assets/文件夹下新建一个叫styles的文件夹，把iconfont.css放进去

5.在main.js里引用iconfont.css

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

6.更改iconfont.css的路径

 

 7.由于字体图标的类名太长或者是个拼音，所以，更改iconfont.css里的类名，叫自己想要的名字

.icon-test:before {
  content: "\e61c";
}

8.然后最重要的一步了，把类名添加到对应的标签里，前面一定要加上一个iconfont类

 <span class="iconfont icon-test" style="font-size:100px"></span>

 

效果：