-
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"> <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浏览器的方法_陈德馨博客 ChenDeXin.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 = ''); } .fa-fw { width: 1.28571429em; text-align: center; } </style> </head> <body> <div> <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表达式输出图标
2、html直接输出图标
除了上述使用css类输出图标外,其实我是还可以直接在html里写上图标编码,网页打开时即显示相应的图标。这样说比较抽象,我们看看下面的写法范例:
<span style=""></span>
这代码里  便是一图标的编码(超链接箭头)。查看所有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"> <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浏览器的方法_陈德馨博客 www.chendexin.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> <font style="font-size:16px;font-weight:bold">超链接图标</font><br> <span style=""></span> </div> </body> </html>
运行结果如图:
以上是两个解决font awesome兼容IE浏览器的方法,一般来说,第一个方法更好,更容易维护。
扩展:
Font Awesome图标在IE浏览器不显示的解决方法
4623人参与 |分类: 站长百科|时间: 2016年12月07日
相关文章
- 2020-01-10作为站长应该懂得的7大搜索引擎站长平台
- 2019-10-22个人博客网站用什么程序比较好?
- 2019-10-12头条搜索站长平台如何添加网站和sitemap文件?附图文教程
- 2019-09-26PHP环境下是选择Apache和Nginx?
- 2019-09-11网站运维人员必做的7项网站维护工作
- 2019-08-26现在还要必要坚持做PC网站或个人博客吗?
- 2019-08-03宝塔面板+云锁nginx自编译web防护的图文教程
- 2019-07-08解决国内主机服务器 WordPress 后台异常卡顿的问题
- 2019-07-02网站启用SSL自动301跳转到HTTPS教程
- 2019-06-06宝塔/BT面板内存占用MySQL频繁崩溃自动重启方法
评论专区德信商城