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

Posted on 2020-04-03 22:31  猫头唔食鱼  阅读(1518)  评论(0编辑  收藏  举报

弄了一晚上太坑了!!!!

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>

 

效果: