webFontIcon三种字体图标详解

最新推荐文章于 2024-10-07 13:16:43 发布

comeonstone

最新推荐文章于 2024-10-07 13:16:43 发布

阅读量3.9k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端总结 Css

本文链接：https://blog.youkuaiyun.com/comeonstone/article/details/48655291

Css 同时被 2 个专栏收录

19 篇文章

订阅专栏

前端总结

5 篇文章

订阅专栏

本文介绍三种图标字体的应用方法，包括GuifxIcon、WebSymbolsRegular和FontAwesome，详细讲解了如何在网页中引入并使用这些图标字体。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

具体可以查看示例。