说下在项目中如何使用icon-font图标库。
GitHub:https://github.com/Ewall1106/mall
新建图标项目
- 打开阿里巴巴矢量图库这个网站,进入图标管理中,在里面新建一个项目。
- 然后我们进入图标库中添加几个图片到购物车中。
- 然后在购物车中将图标添加到项目里面。
下载图标到本地
- 进入我的项目中,然后下载到本地。(这里有三种不同的方式下载,区别大家可以到官网里面了解更多)
项目中引入
- 下载完成了以后,除了
iconfont.js
字体文件对我们没有什么用以外,我们把所有的iconfont
文件复制一下。
- 全部复制到
styles
目录下
- 然后我们到
main.js
中全局引入一下,只要引入iconfont.css
就可以了。
使用
- 我们在项目中用一下,随便找个页面,随便写个标签,但
class
类名要为iconfont
-
span
里面的包裹的十六进制代码去项目中复制一下,即可引入成功。