メンチカツには醤油でしょ!!

AWS/Java/Node.js/Spreadsheets/Docker/Jenkins/コミュニティ・勉強会レポを主とした技術系ブログ

Bootstrapでspanアイコン(Glyphicons)が出なくなった時の対処方法

現象

Bootstrapでspanアイコン(Glyphicons)が出なくなった時の対処方法です。

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
で実装しているアイコンが出なくなった。
(四角い表示になってしまった場合の対処法です)

こんな表示になるんですよね…

f:id:ryoichi0102:20160615184401j:plain

.woffはバイナリ

BootstrapのglyphiconsはFontAwesomeを利用しているのですが
そのファイルである .woffが読めなくなることがあるようです。

原因:
gitのようで .woffファイルをテキストとしてみなしてしまい(実際はバイナリ)
gitが改行コードをいじってしまっている可能性がありそうです。
(参考サイトには他にも考えられる原因がいくつか。)

再発防止:
・gitによる改行コードの自動解釈をオフに設定
 git config --global core.autocrlf false
・.gitconfigで .woffファイルをバイナリとして扱うよう設定。
 .gitattributes に*.woff -diffを追加

対応:
現状のファイルを捨てて新しいもの(元のもの)に入れ替えましょう。

参考

stackoverflow.com