なかちょんブログ

プログラミングとマイクラ好きな子育てパパのブログ

Bootstrapを使ってWordPressのテーマを作る際、glyphiconが表示されない時の対処法

   

Bootstrapは本当に便利なデザインフレームワークですよね。現在、この「なかちょんブログ」も、BootstrapにWordPressのベーステーマの「_s」を使ってテーマを作っています。

glyphiconが表示されない!?

BootstrapをWordPressのテーマに利用した場合、アイコン画像であるglyphiconが表示されません。

時間や人をあらわすアイコンを表示させようとしても、

glyphicon

このように、正しく表示されません。

$icon-font-pathを設定しよう

本当はもっと便利な設定があり、アイコンのpathも自動的に設定することができそうなのですが、私の場合はそこら辺がまだわからず、BootstrapのSass版をダウンロードして、そのままassetsフォルダをWordPressのテーマに移動しただけなので、pathが違う場合は自分で設定する必要があります。

調べてみると、
/assets/stylesheets/bootstrap/_variables.scss
のファイルの中に、$icon-font-pathという変数があり、これがアイコンファイルへのpath担っていることがわかりました。

このファイルを開き、’$icon-font-path’で検索をかけると、下記の表記が見つかります。

// [converter] Asset helpers such as Sprockets and Node.js Mincer do not resolve relative paths
$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default;

ここをまるまる

/** Load fonts from this directory.
$icon-font-path: "assets/fonts/bootstrap/" !default;

このようにするとアイコンフォントへのパスが設定できます。

結果

このように無事、アイコンが表示されました。

glyphicon

 - Bootstrap3, WordPress