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,赶快去试试吧!