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>
通过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>
具体可以查看示例。