読者です 読者をやめる 読者になる 読者になる

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

ITエンジニア徒然 (AWS/Java/JavaScript/Google Spreadsheets/Jenkins/Mac/外部コミュニティ・勉強会レポ)

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