图标设置,通常采用图片,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>
字体图标多用用就熟悉了,相对来说还是非常实用和便捷的。