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代码：

     
A
     
#0065
     
A

通过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代码如下

     
I
I

3、FontAwesome

链接网上资源（也可以直接使用本地资源，貌似有点太麻烦了，因为用icon-开头命名，很多代码需要写）

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来调用，项目中根据情况而定）

让人FontAwesome，使用本地资源，各个图标显示会更一目了然，具体如下：

简要css代码如下：

@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代码： 
  
 
  
 

        
 
  
 
  
 
  
 
  

 
  
具体可以查看示例。