随笔- 98 文章- 0 评论- 0 阅读- 16654

30个免费网页图标字体以及使用方法

文章来源：http://sc.chinaz.com/info/130228237055.htm 设计达人

版权: Free for personal or commercial projects

图标整理自：http://speckyboy.com/2013/02/20/free-icon-font-sets/

在网页设计中使用图标字体（icon font）是件挺有新意的事情，使用图标字体能我们带来了一定的方便，比如在移动设备、Retina屏幕效果展示、兼容IE6/7浏览器以及能任意将图标放大缩小等，这些都是很不错的。下面为大家简单介绍下利用icomoon来实现网页字体和分享30个免费网页图标字体。

使用icomoon定制网页字体

流行的在线字体定制网站有Fontello和icomoon，这两个在线工具都很不错的，内置的图标也非常的多，当然在我今天分享的文章中的图标字体更多更实用更好哦^.^ 接下来我主要讲讲icoMoon的字体定制方法：

打开icoMoon APP字体定制页面，然后你会看到几百个常用图标，这里不建议全选，选几个你需要的就可以了，然后点击底部的“Font”按钮 –> 点击“Download”即可下载字体。

select-your-icon

字体使用

下载完字体后，把Demo文件里面的style.css文件内容复制至你的CSS文件上。

@font-face {
    font-family: 'shejidaren';
    src:url('fonts/shejidaren.eot');
    src:url('fonts/shejidaren.eot?#iefix') format('embedded-opentype'),
        url('fonts/shejidaren.woff') format('woff'),
        url('fonts/shejidaren.ttf') format('truetype'),
        url('fonts/shejidaren.svg#shejidaren') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
...省略了啦