WebアプリにFontAwesomeを使用しようとしていますが、IE7を除いてすべて正常に動作します。残念ながら私はIE7をサポートする必要があります:(
さらに悪いことに、それは私が継承したレガシーアプリであり、顧客はブートストラップに付属のアイコン/グリフを変更することを望んでいません。はい、ブートストラップグリップとは少し異なるFontAwesomeアイコンがいくつかあります。顧客が気づいた図に行きます。
私は決して専門家ではないので、これは私がしたことです（そして私はそれが「うまくいくはずだ」と思います）：
Font Awesomeからcssを取得し、すべてのcssを「icon-」から「fa-icon-」に変更しました。これは、私のアプリでは、ブートストラップに付属のグリフを使用することから変更しなかったことを意味します。これらのクラスはすべて「icon-」であるためです。そして、私のアプリのすべてのFontAwesomeアイコンはクラス「fa-icon-」です。
私の問題は、IE7の互換性に関して何かを台無しにしたに違いないということです。ブラウザがIE7の場合、ヘッダーにfont-awesome-ie7.min.cssが正しく含まれているので、それを再確認しました。
問題は、IE7にアクセスすると、アイコンがまったく表示されないことです。
これが私の変更したCSSのスニペットです。ありとあらゆるアイデアを歓迎します;）
font-awesome-ie7.min.css
[class^="fa-icon"],[class*=" fa-icon"]{font-family: FontAwesome;font-style: normal;font-weight: normal;}
.btn.dropdown-toggle [class^="fa-icon"], .btn.dropdown-toggle [class*=" fa-icon"]{line-height: 1.4em;}
.fa-icon-large{font-size: 1.3333em;}
.ie7icon(@inner){*zoom: ~"expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '@{inner} ')";}
.fa-icon-glass { .ie7icon(''); }
.fa-icon-music { .ie7icon(''); }
.fa-icon-search { .ie7icon(''); }
.fa-icon-envelope { .ie7icon(''); }
font-awesome.min.css
@font-face{font-family: 'FontAwesome';src: url('../font/fontawesome-webfont.eot');src: url('../font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),url('../font/fontawesome-webfont.woff') format('woff'),url('../font/fontawesome-webfont.ttf') format('truetype'),url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');font-weight: normal;font-style: normal;}
[class^="fa-icon-"]:before,[class*=" fa-icon-"]:before {font-family: FontAwesome;font-weight: normal;font-style: normal;display: inline-block;text-decoration: inherit;}
a[class^="fa-icon-"],a[class*=" fa-icon-"]{display: inline-block;text-decoration: inherit;}
.fa-icon-large:before{vertical-align: middle;font-size: 4/3em;}
.btn,.nav-tabs{[class^="fa-icon-"],[class*=" fa-icon-"]{line-height: .9em;}}
li{[class^="fa-icon-"],[class*=" fa-icon-"]{display: inline-block;width: 1.25em;text-align: center;}.fa-icon-large:before,.fa-icon-large:before {width: 1.5*1.25em;}}
ul.icons{list-style-type: none;margin-left: 2em;text-indent: -.8em;li {[class^="fa-icon-"],[class*=" fa-icon-"] {width: .8em;}.fa-icon-large:before,.fa-icon-large:before {vertical-align: initial;}}}
.fa-icon-glass:before { content: "\f000"; }
.fa-icon-music:before { content: "\f001"; }
.fa-icon-search:before { content: "\f002"; }
.fa-icon-envelope:before { content: "\f003"; }
.fa-icon-heart:before { content: "\f004"; }
.fa-icon-star:before { content: "\f005"; }