用文字代替图标
首先将自己需要用到的图标作成字体文件，我用的软件是High-Logic FontCreator，怎么用，自己google一下吧，然后将字体文件转换一下,因为IE浏览器只能识别.eot格式的字文件，最后就是样式了
@font-face {
font-family: 'webiconRegular';
src: url('webicon-webfont.eot');
src: url('webicon-webfont.eot?#iefix') format('embedded-opentype'),
url('webicon-webfont.woff') format('woff'),
url('webicon-webfont.ttf') format('truetype'),
url('webicon-webfont.svg#webiconRegular') format('svg');
font-weight: normal;
font-style: normal;
}
DEMO
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<style>
@font-face {
font-family: 'webiconRegular';
src: url('webicon-webfont.eot');
src: url('webicon-webfont.eot?#iefix') format('embedded-opentype'),
url('webicon-webfont.woff') format('woff'),
url('webicon-webfont.ttf') format('truetype'),
url('webicon-webfont.svg#webiconRegular') format('svg');
font-weight: normal;
font-style: normal;
}
.test,.test2{letter-spacing:-6px;}
.icon { font-family: 'webiconRegular'; font-size:24px;display:inline-block;zoom:1;letter-spacing:0px;width:50px;height:50px;background:#40AA53;color:#fff; line-height:55px;text-align:center;margin:0 5px 5px 0;}
.test2 .icon {background:red;}
</style>
</head>
<body>
<h1>New Web Project Page</h1>
<div class="test">
<span class="icon">a</span>
<span class="icon">b</span>
<span class="icon">c</span>
<span class="icon">d</span>
<span class="icon">e</span>
<span class="icon">f</span>
<span class="icon">g</span>
<span class="icon">h</span>
<span class="icon">i</span>
<span class="icon">j</span>
<span class="icon">k</span>
<span class="icon">l</span>
<span class="icon">m</span>
<span class="icon">n</span>
<span class="icon">o</span>
<span class="icon">p</span>
<span class="icon">q</span>
<span class="icon">r</span>
<span class="icon">s</span>
<span class="icon">t</span>
<span class="icon">u</span>
<span class="icon">v</span>
<span class="icon">w</span>
<span class="icon">x</span>
<span class="icon">y</span>
<span class="icon">z</span>
<span class="icon">A</span>
<span class="icon">B</span>
<span class="icon">C</span>
<span class="icon">D</span>
<span class="icon">E</span>
<span class="icon">F</span>
<span class="icon">G</span>
<span class="icon">H</span>
<span class="icon">I</span>
<span class="icon">J</span>
<span class="icon">K</span>
<span class="icon">L</span>
<span class="icon">M</span>
<span class="icon">N</span>
<span class="icon">O</span>
<span class="icon">P</span>
<span class="icon">Q</span>
<span class="icon">R</span>
<span class="icon">S</span>
<span class="icon">T</span>
<span class="icon">U</span>
<span class="icon">V</span>
<span class="icon">W</span>
<span class="icon">X</span>
<span class="icon">Y</span>
<span class="icon">Z</span>
<span class="icon">0</span>
<span class="icon">1</span>
<span class="icon">2</span>
<span class="icon">3</span>
<span class="icon">4</span>
<span class="icon">5</span>
<span class="icon">6</span>
<span class="icon">7</span>
<span class="icon">8</span>
<span class="icon">9</span>
</div>
<div class="test2">
<span class="icon">a</span>
<span class="icon">b</span>
<span class="icon">c</span>
<span class="icon">d</span>
<span class="icon">e</span>
<span class="icon">f</span>
<span class="icon">g</span>
<span class="icon">h</span>
<span class="icon">i</span>
<span class="icon">j</span>
<span class="icon">k</span>
<span class="icon">l</span>
<span class="icon">m</span>
<span class="icon">n</span>
<span class="icon">o</span>
<span class="icon">p</span>
<span class="icon">q</span>
<span class="icon">r</span>
<span class="icon">s</span>
<span class="icon">t</span>
<span class="icon">u</span>
<span class="icon">v</span>
<span class="icon">w</span>
<span class="icon">x</span>
<span class="icon">y</span>
<span class="icon">z</span>
<span class="icon">A</span>
<span class="icon">B</span>
<span class="icon">C</span>
<span class="icon">D</span>
<span class="icon">E</span>
<span class="icon">F</span>
<span class="icon">G</span>
<span class="icon">H</span>
<span class="icon">I</span>
<span class="icon">J</span>
<span class="icon">K</span>
<span class="icon">L</span>
<span class="icon">M</span>
<span class="icon">N</span>
<span class="icon">O</span>
<span class="icon">P</span>
<span class="icon">Q</span>
<span class="icon">R</span>
<span class="icon">S</span>
<span class="icon">T</span>
<span class="icon">U</span>
<span class="icon">V</span>
<span class="icon">W</span>
<span class="icon">X</span>
<span class="icon">Y</span>
<span class="icon">Z</span>
<span class="icon">0</span>
<span class="icon">1</span>
<span class="icon">2</span>
<span class="icon">3</span>
<span class="icon">4</span>
<span class="icon">5</span>
<span class="icon">6</span>
<span class="icon">7</span>
<span class="icon">8</span>
<span class="icon">9</span>
</div>
</body>
</html>
上面这些图标都是文字哦，亲！