轻量级： 一个字体图标要比一系列的图像要小，一旦字体加载了， 图标就会马上渲染出来， 减少了服务器请求
灵活性： 本是其实是文字， 可以很随意的改变颜色， 产生阴影 透明效果 旋转等
兼容性： 几乎支持所有的浏览器， 请放心使用
注意： 字体图标不能代替精灵技术， 只是对工作中图标部分技术的提升和优化
总结：
1. 如果遇到一些结构和样式比较简单的小图标， 就用字体图标
2. 如果遇到一些结构和样式复杂一点的小图片， 就用精灵图
字体图标的下载
icomoon字库 http://icomoon.io
阿里 iconfont 字库 http://www.iconfont.cn
1. 把下载包里面的 fonts 文件夹放入页面根目录下
2. 字体图标的引入
在 CSS 样式中全局生命字体： 简单理解把这些字体文件通过 CSS 引入到我们的页面中， 一定要注意字体文件路径的问题
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?iy37iv');
src: url('fonts/icomoon.eot?iy37iv#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?iy37iv') format('truetype'),
url('fonts/icomoon.woff?iy37iv') format('woff'),
url('fonts/icomoon.svg?iy37iv#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
3. html 里面添加字体小图标
例如： < span > < span >
4. 给 span 声明一个字体
css 里面
span { font-family: 'icomoon'; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?iy37iv');
src: url('fonts/icomoon.eot?iy37iv#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?iy37iv') format('truetype'),
url('fonts/icomoon.woff?iy37iv') format('woff'),
url('fonts/icomoon.svg?iy37iv#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
span {
font-family: 'icomoon';
}
</style>
</head>
<body>
<span></span>
</body>
</html>字体图标的追加
如果工作中， 原来的字体图标不够用了， 我们需要添加新的字体图标到原来的字体文件中。
把压缩包里面的 selection.json 重新上传， 然后选中自己想要新的图标， 重新下载压缩包， 并替换原来的文件即可
