vue项目中使用阿里icon库
- 从阿里字体图标库新建一个项目(当然也可选择其他icon库)
注意:Font class前缀不要和elment-ui中的图标前缀一样
2.选择需要的图标添加至项目,并生成Font class,下载至本地。
3.选择解压后的文件中的iconfont.css , iconfont.eot , iconfont.svg , iconfont.ttf , iconfont.woff复制到自己的项目中对应的路径下,并在main.js中通过import全局引入,只需要引入iconfont.css即可。
4 修改iconfont.css中的.iconfont选择器,改为属性选择器[class^="el-xxx"],[class*="el-xxx"]
创建项目时设置字体icon前缀,如图:
5 在组建中即可通过<i class="el-ico-x-id-card"></i>
使用。