字体图标的用法总结

1：图标有哪些格式，什么是字体图标？

• 传统图标采用图片格式，有bmp，jpg，gif，png等文件格式；字体图标采用 svg 矢量图片格式
• 图标全部采用字体格式
• 可以使用color，font-size...，改变图标的颜色，大小等样式

2：字体图标实现方式分为哪几类？

• font+html 实现字体图标（又称：Unicode引用）
• font+css 实现字体图标
• 使用 Symbol 方式引用（用于展示彩色图标）

//CSS
@font-face {
  font-family: 'iconfont';  /* project id 1164866 */
  src: url('//at.alicdn.com/t/font_1164866_eeece602red.eot');
  src: url('//at.alicdn.com/t/font_1164866_eeece602red.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1164866_eeece602red.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1164866_eeece602red.woff') format('woff'),
  url('//at.alicdn.com/t/font_1164866_eeece602red.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1164866_eeece602red.svg#iconfont') format('svg');
}

.iconfont {
  font-family:"iconfont" !important;
  font-size: 16px;
  font-style:normal;
  /*Better Font Rendering*/
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

//第一类
<span class="iconfont">&#xe61e;</span>
//第二类
<span class="iconfont icon-ic_share"><span>
.icon-ic_share:before { content: "e61e"; }

3：字体图标与传统图标的区别？
传统图标的实现方法是利用CSS雪碧图，优点是可以减少 http 请求次数，缺点是放大图片时图片会失真，前些年比较流行；
字体图标的实现方法是定义@font-face，优点是可以自定义图标颜色大小且图标不会失真，近些年用得比较多；
最后介绍两个字体图标库—阿里巴巴矢量图标库，IconMoon(https://icomoon.io/app/#/select)。