Bootstrapは本当に便利なデザインフレームワークですよね。現在、この「なかちょんブログ」も、BootstrapにWordPressのベーステーマの「_s」を使ってテーマを作っています。
目次
glyphiconが表示されない！？
BootstrapをWordPressのテーマに利用した場合、アイコン画像である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;
このようにするとアイコンフォントへのパスが設定できます。
結果
このように無事、アイコンが表示されました。
