字体图标 Font Icon

PHPABC CSS 902 次浏览 , 没有评论

图标设置,通常采用图片,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>

字体图标多用用就熟悉了,相对来说还是非常实用和便捷的。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

Go