Font Awesome 4.0.3 字体图标完美兼容IE7

转载于：http://www.thinkcmf.com/index.php?g=topic&m=content&a=index&id=31

开此话题的第一个目的是为了让大家畅所欲言，发表自己对Font Awesome的使用心得，当然还有个很重要的目的是帮助大家解决Font Awesome最新版4.0.3在IE7上的兼容性问题。

具体步骤如下：

1、下载Font Awesome 4.0.3兼容包，http://www.thinkcmf.com/index.php?m=font

2、解压，并放到自己网站系统合适的位置（如果你的站已使用Font Awesome 4.0.3，只需拷出当中font-awesome-ie7.css）

3、引用代码

<link href="./css/font-awesome.css"  rel="stylesheet" type="text/css">
<!--[if IE 7]>
<link rel="stylesheet" href="./css/font-awesome-ie7.css">
<![endif]-->

如果你已经使用了原生Font Awesome 4.0.3，那么只需要你引用下面一段：

<!--[if IE 7]>
<link rel="stylesheet" href="./css/font-awesome-ie7.css">
<![endif]-->

注意：兼容包只对最新版的Font Awesome 4.0.3对老版的Font Awesome 3.2.1兼容处理请百度

另外附英文网站地址：http://www.bootcss.com/p/font-awesome/，http://www.bootcss.com/p/font-awesome/design.html。

使用的时候，包含其字体：

/*hbFntWes*/
@font-face {font-family: 'hbFntWes';src:url('font/fontawesome.eot');src:url('font/fontawesome.eot?#iefix') format('embedded-opentype'),
url('font/fontawesome.woff') format('woff'),
url('font/fontawesome.ttf') format('truetype'),
url('font/fontawesome.svg#fontawesome') format('svg');font-weight: normal;font-style: normal;}
.hbFntWes{font-family:'hbFntWes';font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;-webkit-font-smoothing: antialiased;font-size:22px;line-height:1;}
.hbFntWes b{font-weight:normal;}
.hbFntWes i{font-style:normal;}
.hbFntWes a{display:inline-block;}
/*hbIconMoon*/
@font-face {font-family: 'hbIconMoon';src:url('font/icomoon.eot');src:url('font/icomoon.eot?#iefix') format('embedded-opentype'),
url('font/icomoon.woff') format('woff'),url('font/icomoon.ttf') format('truetype'),
url('font/icomoon.svg#icomoon') format('svg');font-weight: normal;font-style: normal;}
.hbIconMoon{font-family:'hbIconMoon';font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;-webkit-font-smoothing: antialiased;font-size:22px;line-height:1;}
.hbIconMoon b{font-weight:normal;}
.hbIconMoon i{font-style:normal;}
.hbIconMoon a{display:inline-block;}

如果我们想使用三个等号的标志，则使用

<i class="hbFntWes"></i>

即可，关于为什么是，可以查看此页进行对比http://www.bootcss.com/p/font-awesome/design.html。