字体图标

概念

为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

对比精灵图

• 图片文件比较大
• 图片本身放大缩小会失真
• 图片制作完成后更换复杂

场景

主要是网页中通用，常用的一些小图标

• 结构和样式比较简单的小图标，用字体图标
• 结构和样式复杂的小图片，使用精灵图

优点

• 轻量级：图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来
• 灵活性： 本质其实是文字，可以很随意的改变颜色，产生阴影、透明、旋转灯
• 兼容性： 几乎支持所有的浏览器，放心使用

注意： 字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。

使用

• 下载图标
  推荐：icomoon 或者 iconfont
• 引入图标
  下载文件解压，将文字文件夹fonts文件夹放在项目根目录中
  css引入页面中

@font-face{  /*声明字体 引用字体*/
    font-family:'icomoon';
    src:url('fonts/icomoon.eot');
    src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
    url('fonts/icomoon.woff') format('woff'),
    url('fonts/icomoon.ttf')  format('truetype'),
    url('fonts/icomoon.svg#SofiaProLight')  format('svg');
    font-weight:normal;
    font-style:normal;
}

接着，在解压的文件夹中找到demo.html,打开选择需要使用的图标进行复制。再接着在目标html中添加赋值的图标，最后，将图标所在的结构添加字体样式

span {
  font-family: 'icomoon'
  ...
}

• 字体追加
  1.找到压缩包里的 selection.json
  2.打开icomoon网址，点击import icons，选择selection.json
  3.添加新的图标，进行下载
  4.更换掉之前的文件