webFontIcon三种字体图标详解

来源：互联网发布：java返回string 编辑：程序博客网时间：2024/06/06 08:20

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>

具体可以查看示例。

0 0