在项目开发的过程中，我们会经常用到一些图标。但是我们在使用这些图标时，往往会遇到失真的情况，而且图片数量很多的话，页面加载就越慢。所以，我们可以使用字体图标的方式来显示图标，既解决了失真的问题，也解决了图片占用资源的问题。
1.字体图标是什么
字体图标展示的是图标，本质是字体。 一般用于处理简单的、颜色单一的小图标。
2.字体图标的优点
- 灵活性高:可以灵活的修改样式,例如颜色,大小
- 加载速度快:体积小、渲染快、降低服务器请求次数
- 兼容性高：几乎兼容所有主流浏览器
3.字体图标的下载
www.iconfont.cn/ 阿里巴巴字体库 (常用)
4.字体图标的使用
- 步骤一:引入字体图标样式表
-
步骤二:调用图标对应的类名，必须调用2个类名
iconfont类：基本样式，包含字体的使用等
icon-xxx：图标对应的类名
5.使用字体图标 – unicode编码
引入iconfont.css样式表
标签粘贴Unicode编码
标签调用类名iconfont
6.使用字体图标 – 伪元素
只用写一个类名，标签之间加上字体图标的内容就可以了
一定要给声明字体类型(font-family:iconfont)
