IE11に限り、フレームを使っているサイトで片側のフレームだけでFontAwesomeが表示されないことがあった。
どちらかのフレームが必ずなるわけではなく、左がなったり右がなったりする。
ググるとキャッシュの話などが出てくるが、フレームに関しては情報が皆無。
ピンときたのはHTML描画とファイル読み込みなどの完了タイミングがフレームごとにズレていること。
いずれかのフレームの描画が完了したら、他のフレームはフォントの読み込みが止まっているのでは?と推測した。
ならば確実にフォントの読み込みから行うまでと、HTMLにlinkタグでcssファイルを読み込む前に、ベタのstyleタグで下記のように記述した。
<style> @font-face { font-family: 'FontAwesome'; src: url('/***/font-awesome/fonts/fontawesome-webfont.eot?v=4.5.0'); src: url('/***/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('/***/font-awesome/fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('/***/font-awesome/fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('/***/font-awesome/fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('/***/font-awesome/fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } </style>
font-awesome.css の冒頭の内容と同じ。フォントファイルのパスだけ注意。
これを全ページに記述したところ解決した。
この記述だけを外部CSSファイルにしたら再発したので、外部CSSファイルからさらに外部フォントファイルを読みに行くのはIEでは不安定ということで間違いない。