CSS3 Trick: 文字也能做图标

绝大多数时候我们在制作网站时，都会需要用到各式各样的图标（icons），但实际上仅仅利用CSS技术就能利用文字来直接生成图标。那么这么做有什么好处呢？

• 可以自由控制尺寸
• 可以自由控制色彩
• 可以使用字体阴影来美化
• 不需要png或者gif就能够实现透明
• 还有更多优势

 

如果想要得到最好的效果，需要浏览器支持CSS中的@font-face、text-shadow等特性，注意一下浏览器是否支持。
下面我们来看看该怎么把一个文字变成一个好看的图标。

本文中的代码、示例均来自http://css-tricks.com/examples/IconFont/，如果您对本文的技术细节存在疑惑，请以原文为准。

HTML

基本的HTML框架非常简单，任何HTML标记加上我们自己的class或者id都可以：

Check

CSS

CSS就稍微多一些了。这当中需要特别注意的是，@font-face将导入一个存在于您本地服务器或者互联网其它位置的一个字体文件，这个特殊的字体将许多文字绘制成为了更加有意义的形状，如果不用这个字体，一些图形仍旧是可用的，但有些就不是了。
另外，content属性我们之气可能并不常见，这个属性是CSS 2当中就存在的，其作用是插入冒号后的内容，一般都是配合伪属性来自动生成内容。

@font-face {
	font-family: icons;
	src: url('fico.eot');
	src: url('fico.eot?#iefix') format('embedded-opentype'),
		url('fico.ttf') format('truetype'),
		url('fico.svg#Fico') format('svg');
}
.icon:before {
	font-family: icons;
	margin-right: 5px;
}
.icon-replace {
	text-indent: -9999px;
	overflow: hidden;
	display: inline-block;
	position: relative;
	min-width: 1em;
}
.icon-replace:before {
	position: absolute;
	left: 0;  /* Firefox needs to be explicit here */
	top: 0;
	text-indent: 0;
}

.icon-check:before { content: "✔"; }
/* Plus your other icon types here */

上面的代码将直接生成一个图标。为了更好的利用“图标是文字”这一优势，大家还可以自己尝试一下这个：

Stats

查看demo
下载demo