tDiaryでbootstrap-sassのglyphiconを使う

まず結論から書いておくと、bootstrap-sassを導入した状態で.scssに、

$icon-font-path:'../bootstrap/';
@import 'bootstrap';

と記述することでbootstrapのglyphiconが使えるようになる。あとは適当な要素に、

span.sanchor{
  @extend .glyphicons;
  @extend .glyphicons-ok;
}

のようにすることで、element:beforeにアイコンが挿入される。この日記では、span.sanchorとspan.canchorにそれぞれglyphiconを設定してみた。

苦戦した記録

続き。せっかくbootstrapベースにしたので、Glyphiconsも使いたいなあということで試行錯誤した記録。 まずは素直に、scssで

@import 'bootstrap-sprockets';

したところ、asset_pathが定義されていないというエラーが出た。そこでいろいろ調べてみたんだけど、結局_bootstrap.scssでglyphiconsは読み込まれていて(@import 'bootstrap/glyphicons')、パス指定が間違っている状態だということがわかった。_bootstrap-sprockets.scssではそのパスの解決をしているだけだったので、$icon-font-pathを直接指定すればいいのかなということで、まずは現在のパスを調査。存在しない.scssをインポートしてエラーを出すとLoad pathsを表示してくれるというアホっぽい方法で'gems/bootstrap-sass-3.3.6/assets/fonts'がload pathに指定されていることがわかった*1。実際のフォントはfonts/bootstrapに存在するので、http://(server-path)/assets/bootstrap/(フォント名)に直接アクセスしてダウンロードできることを確認。

これを変数に指定して、テスト環境でglyphiconが表示されることを確認した。

$icon-font-path:'/assets/bootstrap/';

これをそのまま本番環境に適用したところ表示されない。かなりハマったけど、単純にこの日記がdiary/以下にあるからパス指定が間違っているだけだった。結局相対パス指定にすることにより、正しく表示されるようになった。