About@fant-face

IcoMoon App 一个在线的图标字体生成工具

相信用过 CSS3 的朋友对 @font-face 这个新特性一定不陌生，使用它我们可以在线给用户添加他们系统默认没有的字体，让网站的界面开起来更加美观。但是你有没有想过，网站上常用的图标也可以直接使用图标字体来实现呢？

IcoMoon App 今天介绍的这个在线应用(个人是非常喜欢)，它就可以在线生成图标字体。真的很不错哦！

生成自定义的字体包，并下载

IcoMoon App 提供免费服务，界面操作很简单，就像网站介绍的那样，在这里你几乎可以找到你需要的所有图标。而且最赞的就是，它可以根据你的需要只生成你需要的自定义的图标字体，而不需要下载全部的字体库。

例如上图，我只需要5个图标，那么你就选中5个我要的就好。然后点击“Font”按钮，进入预览和下载页面，如下图：

图中的就是你选中的图标的预览，你还可以再删除调整，如果你想再更改，就可以直接点击“Download”按钮下载了。下载下来的是一个完整的示例包，有字体文件、CSS和demo.html示例文件，真的很周到！

style.css 文件的内容

 

@font-face {

    font-family: 'icomoon';

    src:url('fonts/icomoon.eot');

    src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),

        url('fonts/icomoon.ttf') format('truetype'),

        url('fonts/icomoon.woff') format('woff'),

        url('fonts/icomoon.svg#icomoon') format('svg');

    font-weight: normal;

    font-style: normal;

}

 

[class^="icon-"], [class*=" icon-"] {

    font-family: 'icomoon';

    speak: none;

    font-style: normal;

    font-weight: normal;

    font-variant: normal;

    text-transform: none;

    line-height: 1;

 

    /* Better Font Rendering =========== */

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}

 

.icon-list:before {

    content: "\e600";

}

.icon-video:before {

    content: "\e607";

}

.icon-trash:before {

    content: "\e608";

}

.icon-search:before {

    content: "\e601";

}

 

熟悉@font-face的朋友应到知道这里的CSS是什么意思了，图标是使用的:before伪类的content内容，当然在content中只能使用转义后的编码。

你需要做的就是在你HTML页面中调用这些样式就OK了，简单方便，不需要使用sprites来做图标了。不过要提醒大家的是，@font-face在IE6-7里是不支持，所以你想要兼容性更好，需要使用一下JS：

 

// 完整的下载地址：http://www.yaohaixiao.com/js/lte-ie7.js

window.onload = function() {

    function addIcon(el, entity) {

        var html = el.innerHTML;

                // font-family 换成你CSS里对应的值

        el.innerHTML = '<span style="font-family: \'linecons\'">' + entity + '</span>' + html;

    }

    var icons = {

                        // 你需要把CSS里的类和转义的content值替换到这里来

            'icon-phone' : '',

            'icon-news' : '',

            'icon-photo' : '',

            'icon-shop' : '',

            'icon-wallet' : ''

        },

        els = document.getElementsByTagName('*'),

        i, attr, html, c, el;

    for (i = 0; ; i += 1) {

        el = els[i];

        if(!el) {

            break;

        }

        attr = el.getAttribute('data-icon');

        if (attr) {

            addIcon(el, attr);

        }

        c = el.className;

        c = c.match(/icon-[^\s'"]+/);

        if (c && icons[c[0]]) {

            addIcon(el, icons[c[0]]);

        }

    }

};

 

OK，赶快去试试吧！