webFontIcon三種字體圖標詳解

1、GuifxIcon-icon

主要css如下：

@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';
}

html代碼：

<div class="box">
     <div class="title">A</div>
     <div class="code">#0065</div>
     <div class="icon">&#0065;</div>
</div>

通過class爲icon，具體鍵盤字母編碼實現，當然，直接寫編碼所代表的字母也ok

2、WebSymbolsRegular

css代碼如下：

@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');
}
/*Web Symbols*/
.websymbols {
     width: 530px;
     margin: 10px auto;
}
.glyphbox {
     overflow: hidden;
}
.glyphbox div {
     width: 50px;
     display: inline-block;
     padding: 5px;
     text-align: center;
     border: 1px solid #ccc;
     margin: 5px 0;
}
.glyphbox div span {
     font-family: 'WebSymbolsRegular';
}

html代碼如下

<div class="glyphbox">
     <div><span>I</span><p><b>I</b></p></div>

3、FontAwesome

鏈接網上資源（也可以直接使用本地資源，貌似有點太麻煩了，因爲用icon-開頭命名，很多代碼需要寫）

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

css代碼：

.fa {
     display: inline-block;
     font: normal normal normal 14px/1 FontAwesome;
     font-size: inherit;
     text-rendering: auto;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
}
.fa-envelope-o:before {content: "\f003";}
.fa-search-plus:before{content:"\f00e"}
.fa-search-minus:before{content:"\f010"}
.fa-power-off:before{content:"\f011"}

html代碼調用：（簡單使用i來調用，項目中根據情況而定）

<i class="fa fa-envelope-o" style="border: 1px solid red; display: block;"></i>

讓人FontAwesome，使用本地資源，各個圖標顯示會更一目瞭然，具體如下：

簡要css代碼如下：

<pre name="code" class="html">@font-face {
    font-family: "FontAwesome";
    font-style: normal;
    font-weight: normal;
    src: url("fontAwesome/font/fontawesome-webfont.eot?#iefix") format("embedded-opentype"), 
		url("fontAwesome/font/fontawesome-webfont.woff") format("woff"), 
		url("fontAwesome/font/fontawesome-webfont.ttf") format("truetype"), 
		url("fontAwesome/font/fontawesome-webfont.svgz#FontAwesomeRegular") format("svg"), 
		url("fontAwesome/font/fontawesome-webfont.svg#FontAwesomeRegular") format("svg");
}
.the-icons li[class^="icon-"]:after, .the-icons li[class*=" icon-"]:after {
    content: attr(class);
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-style: normal;
}

html代碼：

 <ul class="the-icons">
        <li class="icon-glass"></li>

具體可以查看示例。