字体图标

我们经常会用到一些图标。但是我们在使用这些图标时，往往会遇到失真的情况，而且图片数量很多的话，页面加载就越慢。所以，我们可以使用字体图标的方式来显示图标，既解决了失真的问题，也解决了图片占用资源的问题

常用字体图标库：阿里字体图标库 (opens new window) （不限于这个）

优点：

1. 轻量型：加载速度快，减少http请求
2. 灵活性：可以利用CSS设置大小颜色等
3. 兼容性：网页字体支持所有现代浏览器，包括IE低版本

使用阿里字体图标：

1. 注册账号并登录
2. 选取图标或搜索图标
3. 添加购物车
4. 下载代码
5. 将下载后的文件解压放到项目目录里
6. 打开刚下载文件中的demo-index.html
7. 选择font-class引用，里面有使用教程

<!--放head标签里-->
<link rel="stylesheet" href="./iconfont.css">

<!--body标签里，xxx为图标名字，可复制-->
<span class="iconfont icon-xxx"></span>

<!--若想改变样式，可再加一个class类选择器，利用该名设置样式，如大小、颜色等。因为是字体，所以用字体的属性-->