字体图标的用法总结

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

• 图标全部采用字体格式
• 可以使用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;
  margin-right: 4px;
}

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

3：字体图标与传统图标的区别？
传统图标的处理方式是利用CSS雪碧图；