图标设置，通常采用图片，png居多，但是图片多了请求数量就多了，于是诞生了雪碧图，将图片全部合 并到一起来减少请求数量，这应该是一个很完美的事情了。但是Retina屏幕出现了，原来的图片需要1.5X、2X才能清晰的显示在这样的屏幕上，并且随 着图片的写死，后期的交互也出现了麻烦：比如高亮就需要将原来的图片复制一次，加上高亮颜色，无疑增大了图片的体积，Font Icon可以很好的处理这个问题。
字体图标的优点
- 1. 字体图标是矢量，可以无损放大缩小，在Retina屏幕上有天然优势；
- 2. 字体图标可以减少http请求数量；
- 3. 可以通过CSS轻松改变样式，比如：颜色、大小、背景颜色等等；
如何使用字体图标
全篇以http://icomoon.io/app/#/select举例
- 1. 你需要在 icomoon 选取你想要的图标，并下载，icomoon甚至提供了往下兼容的方案；
- 2. 引入字体，需要注意的是字体跨域的问题（IE9和火狐不允许字体跨域，需要在http响应中加入Access-Control-Allow-Origin: *）
@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#icomoon') format('svg'); font-weight: normal; font-style: normal; }</li>
- 3. 申明 class
.icon-list, .icon-play{ font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }.icon-list:before { content: "\e601"; } .icon-play:before { content: "\e604"; }
- 4. 调用 class名称
<a class="gna dropdown-link" href="#" title="导航"> <span class="icon-list"></span>导航 </a> <a class="gna" href="http://mufeng.me/video" title="视频"> <span class="icon-play"></span>视频 </a>
字体图标多用用就熟悉了，相对来说还是非常实用和便捷的。