基于vue的iconfont的使用和优化

1.  在网站https://www.iconfont.cn中,注册账号,在图标管理-我的项目中,可以创建一个新的项目,取名随意。

在图标库里面找自己想要的图标,然后添加到购物车中,完成后再购物车里点击添加至项目。接着在我的项目中下载到本地,此时下载的是一个文件夹,内容如下:

基于vue的iconfont的使用和优化_第1张图片

 

2. 把下载的文件夹内的iconfont.css,iconfont.eot,iconfont.svg,iconfont.ttf,iconfont.woff 一共5个文件拷贝到工程内。

基于vue的iconfont的使用和优化_第2张图片

 

3.  (不强制)用npm安装 stylus和stylus-loader这两个库

4. 需要在main.js里面全局引入iconfont.css文件

import './css/iconfont.css'

5. 在iconfont网站我的后台查看图标,有个复制代码,复制下来,在需要的地方用上

注意。一定要加class="iconfont"属性。

你可能感兴趣的:(vue)