概述
什么是阿里巴巴iconfont字体图标呢？
iconfont字体图标就是用字体来代替图标、图片文件的做法，并且通过字体图标可以对图标的大小、颜色等进行控制。
以前要引用各种图标需要使用的是图标图片，而使用图片需要向服务器请求图片资源，如果有请求次数非常多而用户量又很大那么会很麻烦，造成很多问题，而使用iconfont字体图标，即跟HTML加载一样，减少请求次数，缓解服务器压力。
在国内的阿里巴巴iconfont字体图标网站有很多免费可用的字体图标，下载代码即可使用。
下载
首先需要注册一个账号，在阿里巴巴矢量图标库，也可以使用微博、GitHub账号登录。
登录成功后，可以在首页搜索你要寻找的字体图标名称，在这里搜索的是“首页”
搜索成功后，把鼠标放在你要使用的图标上
然后将其加入到库
点击购物车，查看添加的图标
然后下载代码
下载成功后是一个压缩包，将其解压
打开其中的demo_index.html文件可以看到字体图标的使用教程。
具体使用参考下载下来的demo示例。
使用
Unicode 引用
第一步：间下载下来的所有文件全部复制到所要使用的文件夹下。（demo文件可以不用）
第二步：将图片中要求的代码复制到style标签下，可以引用iconfont.css。
第三步：在HTML中的body标签内要使用到图标的地方引用图标。
效果如下：
完整代码如下：
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">@font-face {font-family: 'iconfont';src: url('iconfont.eot');src: url('iconfont.eot?#iefix') format('embedded-opentype'),url('iconfont.woff2') format('woff2'),url('iconfont.woff') format('woff'),url('iconfont.ttf') format('truetype'),url('iconfont.svg#iconfont') format('svg');}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}</style></head><body><span class="iconfont"></span></body></html>
也可以使用引用iconfont.css的方式，代码更少更方便。
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="iconfont.css" /></head><body><span class="iconfont"></span></body></html>
font-class引用
第一步：引入iconfont.css文件。
第二步是选择相应图标的类名应用于页面。
代码如下：
<!DOCTYPE html><html><head><meta charset="utf-8"><link rel="stylesheet" href="iconfont.css" /></head><body><span class="iconfont icon-shouye"></span></body></html>
symbol引用
阿里平台推荐引用。
第一步：引入iconfont.js文件
第二步：加入通用的CSS代码
第三步：选择合适的图标名应用于页面。
代码如下：
<!DOCTYPE html><html><head><meta charset="utf-8"><!-- 引入iconfont.js --><script src="iconfont.js"></script><!-- 引入CSS代码，引入一次即可 --><style>.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}</style></head><body><!-- 首页图标 --><svg class="icon" aria-hidden="true"><use xlink:href="#icon-shouye"></use></svg></body></html>
