Bootstrap3なら簡単にアイコンフォントを使うことができますが、残念ながらIE７には正式には対応していません。そこでアイコン表示をIE７に対応させる方法をご紹介します。
もくじ
BootstrapアイコンフォントGlyphiconsの表示方法
通常の使い方はこうです。アイコンを表示したい所に下記のコードを挿入します。glyphicon-searchはアイコンにより変わります。
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>まずは、これを書き換えることなく使える方法がないか探してみました。
公開されているIE7用CSS
GitHUBに公開されているIE7用CSSを使ってみました。
Bootstrap 3 for IE7では、IE独自拡張のexpression()関数をつかってアイコンフォントの表示させる方法をとっています。
しかし私の環境ではアイコン部分がどうも上手く表示されず、このまま利用するのは見送ることにしました。
アイコンの文字コード（unicode）を直接HTMLに書く
結局、使いたいアイコンの文字コード（unicode）を直接HTMLに書くのが一番カンタンな対応方法だと気が付きました。
とはいえ、先々のことを考えるとBootstrapの記述を使っておきたいところです。
そこでBootstrap 3 for IE7からヒントを得てjQueryを使う方法に気が付きました。
jQueryを使った解決方法
jQueryでアイコンを表示したい所に、そのアイコンフォントの文字コードを生成します。
ただし.glyphicon-〇〇〇〇に擬似要素:beforeを設定しているため、単純に<span>の中にinnerHTMLで要素を追加してはダメです。アイコンが2重に表示されてしまいます。
また擬似要素:beforeで生成されたコンテンツはjQueryでは操作や加工ができないので、cssに記述するか、擬似要素をもつclassを動的に処理するしか方法がありません。
なのでcssに余計な記述を増やさない方法がこちらになります。
$('span.glyphicon-triangle-right').removeClass('glyphicon-triangle-right').html( '' );まずは<span class=”glyphicon glyphicon-○○”>の.glyphicon-〇〇を.removeClass()で取り除きます。
そして<span class=”glyphicon”>となった中に、該当アイコンの文字コード（unicode）を生成するよう.html()で記述します。
jQueryを用いる方法ならば、Bootstrapの記述ルールはそのままで IE７に対応することが可能です。
必要なアイコンの種類分でjQueryの記述をまとめれば、ファイルサイズも節約できます。
Glyphiconsの各アイコンの文字コード（unicode）は、fontフォルダ内の glyphicons-halflings-regular.svg をテキストエディタで開くと確認することができます。
