@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;
  width: 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: "\f013"; }
.icon-trash:before              { content: "\f014"; }
.icon-home:before               { content: "\f015"; }
.icon-file:before               { content: "\f016"; }
.icon-time:before               { content: "\f017"; }
.icon-road:before               { content: "\f018"; }
.icon-download-alt:before       { content: "\f019"; }
.icon-download:before           { content: "\f01a"; }
.icon-upload:before             { content: "\f01b"; }
.icon-inbox:before              { content: "\f01c"; }
.icon-play-circle:before        { content: "\f01d"; }
.icon-repeat:before             { content: "\f01e"; }

/* \f020 is not a valid unicode character. all shifted one down */
.icon-refresh:before            { content: "\f021"; }
.icon-list-alt:before           { content: "\f022"; }
.icon-lock:before