@font-face是CSS3中有关于字体设置的属性，通过@font-face可以将本地字体设置为Web页面字体，并能兼容所有浏览器，使用这个属性就不必担心用户本地不具备这样的字体。因为我们把字体都上传到服务器上，不过这样一来很多人担心影响性能问题。鱼和熊掌不能兼得嘛，我们就不在为这个问题说太多的话了，不过我今天要与大家分享的主题和这个@font-face还是有很在关系的，使用他配合一定的字体来制作Web页面中的Icon图标。初一看有点不实际，以前的Icon都是依靠图片来完成，怎么可能用字体就能实现呢？如果你以前有用过HTML的实体符，我想就不会那么惊奇了。
如果你以前关注过本站，我想这个你并不会陌生，因为我在css3制作3D分页导航一文中就有用到@font-face来制作icon的效果：
今天我想和大家进一步的探讨这方面的应用，同时为大家准备了多种字体制作Icon的效果，下面我们一起来看看吧。
制作思路
思路其实很清晰，我们就是需要得到font icon的字体，然后通过@font-face将这个字体运用到一定的字符上，从而让他渲染出来是ICON的效果。难就难在无法得到这样的字体，今天我给大家搜集了三种免费的字体，以供大家学习。接下来我们一起来学习这三种字体如何转换成Web上的Icon图标。
第一种：Guifx字体
要使用Guifx字体制作Icon，你首先要得到相应的字体，然后通过fontsquirrel转换各浏览器所需的字体，详细的操作过程大家可以参考@font-face。
字体得到了就好办了，现在只需要使用一定的编码来代表相应的字符，打个比方来说：
<div class="icon">A</div>
那么上面的“A”字符代表的就是一个Icon，只不过我们需要把刚才得到字体运用上去：
@font-face {
font-family: 'GuifxIcon';
src: url('Guifx/guifx_v2_transports-webfont.eot');
src: url('Guifx/guifx_v2_transports-webfont.eot?#iefix') format('embedded-opentype'),
url('Guifx/guifx_v2_transports-webfont.woff') format('woff'),
url('Guifx/guifx_v2_transports-webfont.ttf') format('truetype'),
url('Guifx/guifx_v2_transports-webfont.svg#Guifxv2TransportsRegular') format('svg');
font-weight: normal;
font-style: normal;
}
.icon {
font-family: 'GuifxIcon';
}
这样运用过后，"A"在web中就渲染成下图的icon效果：
上面拿了一个简单的Icon来做实例，其他的运用也是这样的，下面我将对应的字符和Icon对照表放上来让大家使用时好参考，省得测试的时间：
有关于详细的代码大家可以查看这里，当然你可以点击下载相关字体和代码。
第二种：websymbols字体
这种字体其实运用和前面介绍的方法是一样的，唯一区别是使用的字体不一样，从而字母渲染出来的Icon也就不一样了。下面我们同样来看“A”渲染出来的效果
<div class="icon">A</div>
样式的使用：
@font-face{
font-family: 'WebSymbolsRegular';
src: url('websymbols/fonts/websymbols-regular-webfont.eot');
src: url('websymbols/fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('websymbols/fonts/websymbols-regular-webfont.woff') format('woff'),
url('websymbols/fonts/websymbols-regular-webfont.ttf') format('truetype'),
url('websymbols/fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
}
.icon {
font-family: 'WebSymbolsRegular';
}
对应出来的Icon就是下图的样子了：
我想大家肯定也在头痛字体的来源吧，不急，点这里下载吧。同样给大家附上相应的字符照图，以供大家参考：
有关于详细的代码大家可以查看这里，当然你可以点击下载相关字体和代码。
第三种：Font Awesome
Font Awesome是一个强大的字体制作Icon的案例，作者在Bootstrap Icon的基础上将Icon图片换成了字体来制作。初看真的让我汗颜呀，太强大了。下面我们一起来看看如何使用？
HTML Markup
<div class="icon-glass"></div>
相对来说这个字体制作ICON复杂一点，他是在Bootstrap Icon基础上扩展的，只不过区别是Bootstrap Icon采用的是IMG，而他采用的是@font-face:
@font-face {
font-family: 'FontAwesome';
src: url('font/fontawesome-webfont.eot');
src: url('font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.svgz#FontAwesomeRegular') format('svg'), url('../font/fontawesome-webfont.svg#FontAwesomeRegular') format('svg');
font-weight: normal;
font-style: normal;
}
/* sprites.less reset */
[class^="icon-"],
[class*=" icon-"] {
display: inline;
auto;
height: auto;
line-height: inherit;
vertical-align: baseline;
background-image: none;
background-position: 0% 0%;
background-repeat: repeat;
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
}
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */
.icon-glass:before { content: "f000"; }
.icon-music:before { content: "f001"; }
.icon-search:before { content: "f002"; }
.icon-envelope:before { content: "f003"; }
.icon-heart:before { content: "f004"; }
.icon-star:before { content: "f005"; }
.icon-star-empty:before { content: "f006"; }
.icon-user:before { content: "f007"; }
.icon-film:before { content: "f008"; }
.icon-th-large:before { content: "f009"; }
.icon-th:before { content: "f00a"; }
.icon-th-list:before { content: "f00b"; }
.icon-ok:before { content: "f00c"; }
.icon-remove:before { content: "f00d"; }
.icon-zoom-in:before { content: "f00e"; }
.icon-zoom-out:before { content: "f010"; }
.icon-off:before { content: "f011"; }
.icon-signal:before { content: "f012"; }
.icon-cog:before { content: