记忆盒子

把记忆装进灰色的盒子,封装起来,那年那月,重新拾起。

首页搜索目录
search
当前主题: 互联网络

Font Awesome图标在IE浏览器不显示的解决方法

作者:Kaka    时间:2016-11-24 12:17:10    浏览:    评论:0

IIS安装了font awesome图标字体库之后,在firefox和chrome上浏览正常,但在IE上却看不见图标,咋回事?查询后才知道,font awesome在IE上确实不能运行正常。后来通过查询,原来可以通过两个方法来解决这个问题,完美解决了Font Awesome图标在IE浏览器不显示的问题。

1、css利用expression表达式输出图标

由于 content: "\f08e"; 的写法在IE无效,所以图标无法显示。不过css里利用expression表达式,使用 this.innerHTML 方法却是可以输出图标的。代码如下所示:

.fa-external-link {
  *zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '');
}

这其中  便是一个font awesome图标(超链接箭头)。*zoom 前面的星号“*”是表示只对IE浏览器有效。

html代码就可以这样写来输出一个font awesome图标:

<i class="fa fa-external-link"></i>

这里 fa 是另一个相关的css类,主要是要声明 font-family 使用 fontAwesome 字体的作用。代码如下:

.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;
}

完整html代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <meta http-equiv="Content-Language" content="zh-CN" />
     <meta http-equiv="Cache-Control" content="no-transform " />
     <meta http-equiv="Cache-Control" content="no-siteapp" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" />
     <title>font awesome实例_兼容IE浏览器的方法_卡卡网 webkaka.com</title>
<style type="text/css">
/* 引用图标文件 注意路径 */
@font-face {
  font-family: 'FontAwesome';
  src: url('fonts/fontawesome-webfont.eot?v=4.2.0');
  src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'),
  url('fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'),
  url('fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'),
  url('fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.txtContent{
    width:100%;
    margin:30px 30px 30px 30px;
}
.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-external-link:before {
  content: "\f08e";  /* 非IE浏览器有效 */
}
.fa-external-link {
  *zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '&#xf08e;');
}
.fa-fw {
  width: 1.28571429em;
  text-align: center;
}
</style>
</head>
<body>
    <div class="txtContent">
        <font style="font-size:16px;font-weight:bold">超链接图标</font><br>
        <a href="#">超链接图标<i class="fa fa-external-link fa-fw"></i></a><br>
    </div>
</body>
</html>

代码运行结果如图:

css利用expression表达式输出图标

css利用expression表达式输出图标

提示:文章结尾可下载本实例。

2、html直接输出图标

除了上述使用css类输出图标外,其实我是还可以直接在html里写上图标编码,网页打开时即显示相应的图标。这样说比较抽象,我们看看下面的写法范例:

<span class="icon-external-link" style="">&#xf08e;</span>

这代码里 &#xf08e; 便是一图标的编码(超链接箭头)。查看所有font awesome图标的编码

icon-external-link是css类名,主要作用是要声明 font-family 使用的字体为 FontAwesome

.icon-external-link {
  font-family:FontAwesome; /* FontAwesome 无引号 */
  font-weight: normal;
  font-style: normal;
}

FontAwesome 是一个变量,它是由 @font-face 定义的,如下代码所示:

@font-face {
  font-family: 'FontAwesome'; /* FontAwesome 有引号 */
  src: url('fonts/fontawesome-webfont.eot?v=4.2.0');
  src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'),
  url('fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'),
  url('fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'),
  url('fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

声明 @font-face 时,需要特别主要各文件的路径要正确。

完整的html代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <meta http-equiv="Content-Language" content="zh-CN" />
     <meta http-equiv="Cache-Control" content="no-transform " />
     <meta http-equiv="Cache-Control" content="no-siteapp" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" />
     <title>font awesome实例_兼容IE浏览器的方法_卡卡网 webkaka.com</title>
<style type="text/css">
@font-face {
  font-family: 'FontAwesome';
  src: url('fonts/fontawesome-webfont.eot?v=4.2.0');
  src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'),
  url('fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'),
  url('fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'),
  url('fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.txtContent{
    width:100%;
    margin:30px 30px 30px 30px;
}
.icon-external-link {
  font-family:FontAwesome;
  font-weight: normal;
  font-style: normal;
}
</style>
</head>
<body>
    <div class="txtContent">
        <font style="font-size:16px;font-weight:bold">超链接图标</font><br>
        <span class="icon-external-link" style="">&#xf08e;</span>
    </div>
</body>
</html>

运行结果如图:

html直接输出图标

html直接输出图标

提示:文章结尾可下载本实例。

以上是两个解决font awesome兼容IE浏览器的方法,一般来说,第一个方法更好,更容易维护。

本文实例下载

点击下载

Font Awesome 4.2.0下载

点击下载

您可能对以下文章也感兴趣

IIS6.0安装配置FontAwesome图标字体运行环境

IIS7.5安装配置Font Awesome图标字体的方法

Font Awesome content代码汇总,共246个

x

标签: FontAwesome  

※ 网站速度慢?试试网站自动优化工具 ※

上一篇: IIS7.5安装配置Font Awesome图标字体的方法
下一篇: Linux Nginx安装配置Font Awesome图标字体【好简单】

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

订阅博客                   QQ交流群(312716741)

  • 通过Google订阅本站 通过鲜果订阅本站 通过抓虾订阅本站
  • 通过QQ邮箱订阅本站 通过Yahoo订阅本站 通过有道订阅本站

Search

最新评论及回复

最近留言

网站分类

Powered By Z-Blog 1.8 Walle Build 91204 Designed by Han'space

Copyright @2009-2024 All Rights Reserved. 粤ICP备14028160号-1

Powered By Z-Blog 1.8 Walle Build 91204
Copyright @2009-2024 All Rights Reserved.