聊一聊 iconfont

聊一聊 iconfont

简述 iconfont

把图标用字体的方式呈现
把大量的图标变成了一个字体文件，减少了请求数，而且有效减小请求体积。当一个网页有自己的图标字体库之后，可以复用在很多地方，减少很多二次开发成本

为什么使用iconfont?

1.兼容性最好，支持ie6+
2.矢量图形，可伸缩

使用方式

1.登录:http://www.iconfont.cn/

2.找到图标管理->我的项目->新建项目
点击新建项目,用于保存自己常用的图标

3.项目新建完成后,往项目里添加我们想使用的图标，搜索想要的图标,然后添加到购物车

4.添加到购物车完成后,点击右上角的购物车图标,选择添加至项目,选择刚刚创建的项目,确定

5.将打包好的字体文件下载到本地添加到你的项目中,在项目中引用文件中的iconfont.css文件

6.把下载的文件都放在一个文件夹内,然后放在项目目录中,再在项目中引入iconfont.css文件,或将iconfont.css文件里的内容复制粘贴到你当前项目的css内容里

7.创建一个i标签或span标签,添加两个类名,一个固定的是iconfont,另一个是你想要的那个图标对应的类名

// 修改大小可通过 style 
<i class="iconfont icon-xxx">