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">A</div> </div>
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>
具体可以查看示例。