@font-face制做Web Icon
@font-face是CSS3中有关于字体设置的属性，经过@font-face能够将本地字体设置为Web页面字体，并能兼容全部浏览器，使用这个属性就没必要担忧用户本地不具有这样的字体。由于咱们把字体都上传到服务器上，不过这样一来不少人担忧影响性能问题。鱼和熊掌不能兼得嘛，咱们就不在为这个问题说太多的话了，不过我今天要与你们分享的主题和这个@font-face仍是有很在关系的，使用他配合必定的字体来制做Web页面中的Icon图标。初一看有点不实际，之前的Icon都是依靠图片来完成，怎么可能用字体就能实现呢？若是你之前有用过HTML的实体符，我想就不会那么惊奇了。css
若是你之前关注过本站，我想这个你并不会陌生，由于我在css3制做3D分页导航一文中就有用到@font-face来制做icon的效果：html
今天我想和你们进一步的探讨这方面的应用，同时为你们准备了多种字体制做Icon的效果，下面咱们一块儿来看看吧。css3
制做思路
思路其实很清晰，咱们就是须要获得font icon的字体，而后经过@font-face将这个字体运用到必定的字符上，从而让他渲染出来是ICON的效果。难就难在没法获得这样的字体，今天我给你们搜集了三种免费的字体，以供你们学习。接下来咱们一块儿来学习这三种字体如何转换成Web上的Icon图标。git
第一种：Guifx字体
要使用Guifx字体制做Icon，你首先要获得相应的字体，而后经过fontsquirrel转换各浏览器所需的字体，详细的操做过程你们能够参考@font-face。github
字体获得了就好办了，如今只须要使用必定的编码来表明相应的字符，打个比方来讲：web
<div class="icon">A</div>
那么上面的“A”字符表明的就是一个Icon，只不过咱们须要把刚才获得字体运用上去：bootstrap
@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效果：api
上面拿了一个简单的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