rails-assetsでbootstrap-sassを使う際にglyphiconのパスでハマらない為のメモ

glyphiconのパスで悩まないために！

RailsプロジェクトでBootstrap3を適用したい際に、最近はrails-assetsをよく使っています。
今回も同様にそのようにしようとしたところ、glyphiconが表示されない現象に悩まされました。

こんな感じのやつですね！！

今回は同様のことが起きてみなさんの時間を無駄にしないようにするために、簡潔にメモを残したいと思います。

bootstrap-sassをrails-assets経由でインストール

まずはrails-assets経由でbootstrap-sassをインストールします。今回は、bootstrap-sass-officialを使います。
以下をGemfileに追加します。

Gemfile

source 'https://rails-assets.org' do
  gem 'rails-assets-jquery', '1.11.3'
  gem 'rails-assets-jquery-ujs'
  gem 'rails-assets-bootstrap-sass-official', '3.3.5'
end

bundle installしましょう。

これでインストールは終わりました。

assets以下の設定

では、rails-assetsでインストールしたものをassetsで読み込みましょう。

JavaScript(CoffeeScript)

こちらは特に迷うことはありません。普通です。

assets/javascripts/application.coffee

#= require jquery
#= require jquery-ujs
#= require turbolinks
#= require bootstrap-sass-official
#= require_tree .

CSS(SASS)

肝はこちらです。$icon-font-pathを設定します。

assets/stylesheets/application.scss

$icon-font-path: "bootstrap-sass-official/assets/fonts/bootstrap/";
@import "bootstrap-sass-official/bootstrap-sprockets";
@import "bootstrap-sass-official";

なんかめっちゃ長いですよね…。おかげですごくハマったんですが。
参考にしたqiitaの記事のUse Bootstrap-Sass 3.x and Font Awesome (bower-rails vs. rails-assets)では、

$icon-font-path: "bootstrap-sass-official/";

と書いてありますが、これは間違いじゃないかなと思います…。（当時は動いていたのかもしれないですが）

どうして気付いたのか

先の記事のようにしても全然表示されないため、IntelliJのExternal Libraryを掘っていって、該当gem(rails-assets-bootstrap-sass-official)のディレクトリ構成を見ました。

なんか、やけに長いですよね。IntelliJで開いているせいか、パッケージっぽい表示になってしまっています。.(ドット)のつながりはディクレトリなので、実際は、fonts/bootstrap-sass-official/assets/fonts/bootstrapです。これを、最初のfontsを外して、$icon-font-pathに指定しました。

結果

ジャジャーン！

感想

なんで$icon-font-pathが長ったらしくなるんや…。
ググっても似たようなキーワードだといい情報に出会えなかったので、そういうときはgemのインストールディレクトリを掘っていきましょう。