欢迎您,零度科技专业海外服务器租用
公司电话: 24小时电话: 

当前位置:首页>网站建设教程>CSS教程

目录导航

字体图标 Font Icon

美国HS机房 发布于 2015-04-30  
CSS教程

图标设置,通常采用图片,png居多,但是图片多了请求数量就多了,于是诞生了雪碧图,将图片全部合并到一起来减少请求数量,这应该是一个很完美的事情了。但是Retina屏幕出现了,原来的图片需要1.5X、2X才能清晰的显示在这样的屏幕上,并且随着图片的写死,后期的交互也出现了麻烦:比如高亮就需要将原来的图片复制一次,加上高亮颜色,无疑增大了图片的体积,Font Icon可以很好的处理这个问题。

字体图标的优点

如何使用字体图标

全篇以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;
}

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="http://mufeng.me/"#" title="导航">
    <span class="icon-list"></span>导航
</a>

<a class="gna" href="http://mufeng.me/"http://mufeng.me/video" title="视频">
    <span class="icon-play"></span>视频
</a>

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

零度科技原文链接:http://www.ldisp.com/a/css/2015/3190.shtml

上一篇:CSS3神器实现ico小图标
下一篇:没有了

 
了解零度?

零度科技主营全球服务器租用,如果您有服务器租用需求请联系

海外服务器租用

推荐香港、美国、韩国。提供站群服务器、高防服务器租用

海外特价服务器

关注零度特价服务器频道,了解全球特价服务器。

1

业务咨询

    技术服务

      特价活动
        全站搜索
        热门搜索:
        会员
        0通知
        客服
        0特价
        搜索
        TOP
        香港高防服务器,远程桌面,韩国服务器,nginx,反向代理