Font-Awesome Icons не отображается правильно в IE8

Question

Я использую bootstrap в своем приложении для создания навигационной панели. Он отлично работает, за исключением случаев, когда я начинаю добавлять значки в свое раскрывающееся меню, которое использует шрифт-удивительный.

Он отлично работает в Firefox, но он также должен работать в IE8. Я ищу stackoverflow для других решений, и никто из них, похоже, не работал в моем случае.

Вот что я получаю, когда я загружаю мою страницу:

Любая помощь о том, как исправить это было бы здорово!

Вот Font-awesome.css файл

* -------------------------- */ 
@font-face { 
font-family: 'Glyphicons Halflings'; 
    src: url('../../bootstrap-3.0.0/dist/fonts/glyphicons-halflings-regular.eot'); 
    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../../bootstrap-3.0.0/dist/fonts/glyphicons-halflings-regular.woff') format('woff'), url('../../bootstrap-3.0.0/dist/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'); 
} 
} 
/* FONT AWESOME CORE 
* -------------------------- */ 
[class^="icon-"], 
[class*=" icon-"] { 
    font-family: FontAwesome; 
    font-weight: normal; 
    font-style: normal; 
    text-decoration: inherit; 
    -webkit-font-smoothing: antialiased; 
    *margin-right: .3em; 
} 
[class^="icon-"]:before, 
[class*=" icon-"]:before { 
    text-decoration: inherit; 
    display: inline-block; 
    speak: none; 
} 
/* makes the font 33% larger relative to the icon container */ 
.icon-large:before { 
    vertical-align: -10%; 
    font-size: 1.3333333333333333em; 
} 
/* makes sure icons active on rollover in links */ 
a [class^="icon-"], 
a [class*=" icon-"], 
a [class^="icon-"]:before, 
a [class*=" icon-"]:before { 
    display: inline; 
} 
/* increased font size for icon-large */ 
[class^="icon-"].icon-fixed-width, 
[class*=" icon-"].icon-fixed-width { 
    display: inline-block; 
    width: 1.2857142857142858em; 
    text-align: center; 
} 
[class^="icon-"].icon-fixed-width.icon-large, 
[class*=" icon-"].icon-fixed-width.icon-large { 
    width: 1.5714285714285714em; 
} 
ul.icons-ul { 
    list-style-type: none; 
    text-indent: -0.7142857142857143em; 
    margin-left: 2.142857142857143em; 
} 
ul.icons-ul > li .icon-li { 
    width: 0.7142857142857143em; 
    display: inline-block; 
    text-align: center; 
} 
[class^="icon-"].hide, 
[class*=" icon-"].hide { 
    display: none; 
} 
.icon-muted { 
    color: #eeeeee; 
} 
.icon-light { 
    color: #ffffff; 
} 
.icon-dark { 
    color: #333333; 
} 
.icon-border { 
    border: solid 1px #eeeeee; 
    padding: .2em .25em .15em; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
} 
.icon-2x { 
    font-size: 2em; 
} 
.icon-2x.icon-border { 
    border-width: 2px; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
} 
.icon-3x { 
    font-size: 3em; 
} 
.icon-3x.icon-border { 
    border-width: 3px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
} 
.icon-4x { 
    font-size: 4em; 
} 
.icon-4x.icon-border { 
    border-width: 4px; 
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
    border-radius: 6px; 
} 
.icon-5x { 
    font-size: 5em; 
} 
.icon-5x.icon-border { 
    border-width: 5px; 
    -webkit-border-radius: 7px; 
    -moz-border-radius: 7px; 
    border-radius: 7px; 
} 
.pull-right { 
    float: right; 
} 
.pull-left { 
    float: left; 
} 
[class^="icon-"].pull-left, 
[class*=" icon-"].pull-left { 
    margin-right: .3em; 
} 
[class^="icon-"].pull-right, 
[class*=" icon-"].pull-right { 
    margin-left: .3em; 
} 
/* BOOTSTRAP SPECIFIC CLASSES 
* -------------------------- */ 
/* Bootstrap 2.0 sprites.less reset */ 
html > body [class^="icon-"], 
[class*=" icon-"] { 
    display: inline; 
    width: auto; 
    height: auto; 
    line-height: normal; 
    vertical-align: baseline; 
    background-image: none; 
    background-position: 0% 0%; 
    background-repeat: repeat; 
    margin-top: 0; 
} 
/* more sprites.less reset */ 
.icon-white, 
.nav-pills > .active > a > [class^="icon-"], 
.nav-pills > .active > a > [class*=" icon-"], 
.nav-list > .active > a > [class^="icon-"], 
.nav-list > .active > a > [class*=" icon-"], 
.navbar-inverse .nav > .active > a > [class^="icon-"], 
.navbar-inverse .nav > .active > a > [class*=" icon-"], 
.dropdown-menu > li > a:hover > [class^="icon-"], 
.dropdown-menu > li > a:hover > [class*=" icon-"], 
.dropdown-menu > .active > a > [class^="icon-"], 
.dropdown-menu > .active > a > [class*=" icon-"], 
.dropdown-submenu:hover > a > [class^="icon-"], 
.dropdown-submenu:hover > a > [class*=" icon-"] { 
    background-image: none; 
} 
/* keeps Bootstrap styles with and without icons the same */ 
.btn [class^="icon-"].icon-large, 
.nav [class^="icon-"].icon-large, 
.btn [class*=" icon-"].icon-large, 
.nav [class*=" icon-"].icon-large { 
    line-height: .9em; 
} 
.btn [class^="icon-"].icon-spin, 
.nav [class^="icon-"].icon-spin, 
.btn [class*=" icon-"].icon-spin, 
.nav [class*=" icon-"].icon-spin { 
    display: inline-block; 
} 
.nav-tabs [class^="icon-"], 
.nav-pills [class^="icon-"], 
.nav-tabs [class*=" icon-"], 
.nav-pills [class*=" icon-"], 
.nav-tabs [class^="icon-"].icon-large, 
.nav-pills [class^="icon-"].icon-large, 
.nav-tabs [class*=" icon-"].icon-large, 
.nav-pills [class*=" icon-"].icon-large { 
    line-height: .9em; 
} 
.btn [class^="icon-"].pull-left.icon-2x, 
.btn [class*=" icon-"].pull-left.icon-2x, 
.btn [class^="icon-"].pull-right.icon-2x, 
.btn [class*=" icon-"].pull-right.icon-2x { 
    margin-top: .18em; 
} 
.btn [class^="icon-"].icon-spin.icon-large, 
.btn [class*=" icon-"].icon-spin.icon-large { 
    line-height: .8em; 
} 
.btn.btn-small [class^="icon-"].pull-left.icon-2x, 
.btn.btn-small [class*=" icon-"].pull-left.icon-2x, 
.btn.btn-small [class^="icon-"].pull-right.icon-2x, 
.btn.btn-small [class*=" icon-"].pull-right.icon-2x { 
    margin-top: .25em; 
} 
.btn.btn-large [class^="icon-"], 
.btn.btn-large [class*=" icon-"] { 
    margin-top: 0; 
} 
.btn.btn-large [class^="icon-"].pull-left.icon-2x, 
.btn.btn-large [class*=" icon-"].pull-left.icon-2x, 
.btn.btn-large [class^="icon-"].pull-right.icon-2x, 
.btn.btn-large [class*=" icon-"].pull-right.icon-2x { 
    margin-top: .05em; 
} 
.btn.btn-large [class^="icon-"].pull-left.icon-2x, 
.btn.btn-large [class*=" icon-"].pull-left.icon-2x { 
    margin-right: .2em; 
} 
.btn.btn-large [class^="icon-"].pull-right.icon-2x, 
.btn.btn-large [class*=" icon-"].pull-right.icon-2x { 
    margin-left: .2em; 
} 
/* EXTRAS 
* -------------------------- */ 
/* Stacked and layered icon */ 
.icon-stack { 
    position: relative; 
    display: inline-block; 
    width: 2em; 
    height: 2em; 
    line-height: 2em; 
    vertical-align: -35%; 
} 
.icon-stack [class^="icon-"], 
.icon-stack [class*=" icon-"] { 
    display: block; 
    text-align: center; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    font-size: 1em; 
    line-height: inherit; 
    *line-height: 2em; 
} 
.icon-stack .icon-stack-base { 
    font-size: 2em; 
    *line-height: 1em; 
} 
/* Animated rotating icon */ 
.icon-spin { 
    display: inline-block; 
    -moz-animation: spin 2s infinite linear; 
    -o-animation: spin 2s infinite linear; 
    -webkit-animation: spin 2s infinite linear; 
    animation: spin 2s infinite linear; 
} 
@-moz-keyframes spin { 
    0% { 
     -moz-transform: rotate(0deg); 
     -ms-transform: rotate(0deg); 
     -o-transform: rotate(0deg); 
     -webkit-transform: rotate(0deg); 
     transform: rotate(0deg); 
    } 
    100% { 
     -moz-transform: rotate(359deg); 
     -ms-transform: rotate(359deg); 
     -o-transform: rotate(359deg); 
     -webkit-transform: rotate(359deg); 
     transform: rotate(359deg); 
    } 
} 
@-webkit-keyframes spin { 
    0% { 
     -webkit-transform: rotate(0deg); 
     -moz-transform: rotate(0deg); 
     -ms-transform: rotate(0deg); 
     -o-transform: rotate(0deg); 
     transform: rotate(0deg); 
    } 
    100% { 
     -webkit-transform: rotate(359deg); 
     -moz-transform: rotate(359deg); 
     -ms-transform: rotate(359deg); 
     -o-transform: rotate(359deg); 
     transform: rotate(359deg); 
    } 
} 
@-o-keyframes spin { 
    0% { 
     -o-transform: rotate(0deg); 
     -moz-transform: rotate(0deg); 
     -ms-transform: rotate(0deg); 
     -webkit-transform: rotate(0deg); 
     transform: rotate(0deg); 
    } 
    100% { 
     -o-transform: rotate(359deg); 
     -moz-transform: rotate(359deg); 
     -ms-transform: rotate(359deg); 
     -webkit-transform: rotate(359deg); 
     transform: rotate(359deg); 
    } 
} 
@-ms-keyframes spin { 
    0% { 
     -ms-transform: rotate(0deg); 
     -moz-transform: rotate(0deg); 
     -o-transform: rotate(0deg); 
     -webkit-transform: rotate(0deg); 
     transform: rotate(0deg); 
    } 
    100% { 
     -ms-transform: rotate(359deg); 
     -moz-transform: rotate(359deg); 
     -o-transform: rotate(359deg); 
     -webkit-transform: rotate(359deg); 
     transform: rotate(359deg); 
    } 
} 
@keyframes spin { 
    0% { 
     -moz-transform: rotate(0deg); 
     -ms-transform: rotate(0deg); 
     -o-transform: rotate(0deg); 
     -webkit-transform: rotate(0deg); 
     transform: rotate(0deg); 
    } 
    100% { 
     -moz-transform: rotate(359deg); 
     -ms-transform: rotate(359deg); 
     -o-transform: rotate(359deg); 
     -webkit-transform: rotate(359deg); 
     transform: rotate(359deg); 
    } 
} 
/* Icon rotations and mirroring */ 
.icon-rotate-90:before { 
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -ms-transform: rotate(90deg); 
    -o-transform: rotate(90deg); 
    transform: rotate(90deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 
} 
.icon-rotate-180:before { 
    -webkit-transform: rotate(180deg); 
    -moz-transform: rotate(180deg); 
    -ms-transform: rotate(180deg); 
    -o-transform: rotate(180deg); 
    transform: rotate(180deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); 
} 
.icon-rotate-270:before { 
    -webkit-transform: rotate(270deg); 
    -moz-transform: rotate(270deg); 
    -ms-transform: rotate(270deg); 
    -o-transform: rotate(270deg); 
    transform: rotate(270deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
} 
.icon-flip-horizontal:before { 
    -webkit-transform: scale(-1, 1); 
    -moz-transform: scale(-1, 1); 
    -ms-transform: scale(-1, 1); 
    -o-transform: scale(-1, 1); 
    transform: scale(-1, 1); 
} 
.icon-flip-vertical:before { 
    -webkit-transform: scale(1, -1); 
    -moz-transform: scale(1, -1); 
    -ms-transform: scale(1, -1); 
    -o-transform: scale(1, -1); 
    transform: scale(1, -1); 
} 

Answer 1

Ммм попробовать html5.js после main.css. Это работает для меня.

<link rel="stylesheet" href="/stylesheets/main.css" type="text/css"> 
<!--[if lt IE 9]> 
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]-->