YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

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

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

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

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

icomoon

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

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

icomoon-1

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

icomoon-2

图中的就是你选中的图标的预览,你还可以再删除调整,如果你想再更改,就可以直接点击“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' : '&#xe000;',
			'icon-news' : '&#xe001;',
			'icon-photo' : '&#xe002;',
			'icon-shop' : '&#xe003;',
			'icon-wallet' : '&#xe004;'
		},
		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,赶快去试试吧!

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:IcoMoon App 一个在线的图标字体生成工具

« »

发表评论

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

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)