什么是字体图标？
在html代码中是以文字元素的形式出现，但在网页渲染时却以图片的形式显示的小图标就叫做字体图标。
常见形式：地址、电话、登录窗口的头像等。
字体图标与精灵图对比
字体图标比精灵图更为轻量化，在网页中加载速度更快；
精灵图在实际使用中，图片放大或缩小时图片会失真。
精灵图是一张多个图标整合的一个大图片，后续添加或修改图标不方便。
注：
虽然字体图标好处多多，但是它并不能替代精灵图。
当小图标形式简单且个数较少时适合使用字体图标；
当小图标形式复杂且个数较多时适合使用精灵图。
字体图标哪里来？
icomoon网站：https://icomoon.io/。
阿里iconfont字库：https://www.iconfont.cn/。
字体图标使用方法
以icomoon网站为例。
从网站中下载图标压缩包：点击右上角“IcoMoon App”按钮，进入字体图标选择页面。
选中需要的图标（选中状态的图标，背景颜色会变白且出现黄色边框）后，个数可以选择1个，也可以选择多个。选好图标后，点击右下角“Generate Font ”按钮进入下载页面。
点击右下角“download”按钮进行下载。
解压下载好的压缩包。
将解压好的文件夹整体添加到项目文件夹中，我没有单独设置字体文件夹，直接放在素材图片文件夹了。
打开字体图标文件夹中style.css，
复制字体声明到html文件的style样式中，改变url的图标文件存放位置。
span标签中字体样式需要与字体声明中样式保持一致。
在html文件中，span标签的内容是需要从网站中直接粘贴复制过来使用。在网站下载页面，鼠标点击就是选中状态，直接ctrl+c复制即可。
如此就是完整的字体图标使用过程。另外有阿里iconfont也可以使用，也是免费的。有兴趣可自行了解。
字体图标代码示例
<style>
/* 字体声明 ：从下载字体图标的文件夹中style.css文件上复制过来的*/
@font-face {
font-family: 'icomoon';
src: url('../images/icomoon/fonts/icomoon.eot?49yzcu');
src: url('../images/icomoon/fonts/icomoon.eot?49yzcu#iefix') format('embedded-opentype'),
url('../images/icomoon/fonts/icomoon.ttf?49yzcu') format('truetype'),
url('../images/icomoon/fonts/icomoon.woff?49yzcu') format('woff'),
url('../images/icomoon/fonts/icomoon.svg?49yzcu#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
span {
font-family: 'icomoon';
font-size: 100px;
color: antiquewhite;
}
</style>好了，今天的学习就到这里了，下回学习CSS三角~