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

ボクココ

サービス開発を成功させるまでの歩み

FontAwesome を Bower から入れてアイコンを表示させる

AngularJS

Bower から bootstrap や font-awesome を入れると、 bower_components/ 以下にそれぞれプラグインのように保存される。
メインのSCSSファイルでそのパスに読み込むようにインポートすればよいのだが、font-awesome の場合、画像パスをデフォルトのままにすると404 でとって来れなくなる。

font-awesome の画像パスはSCSSの変数で参照されているので、その変数をオーバーライドすれば正しいパスを見に行くことになる。

この変数名が、他のサイトと自分のバージョンとで違っていたので、メモとして残す。

まずはインストール


$ bower install font-awesome --save

scssファイル内


$iconSpritePath: "../images/glyphicons-halflings.png";
$iconWhiteSpritePath: "../images/glyphicons-halflings-white.png";
@import "bootstrap-sass/lib/bootstrap";

$fa-font-path: "/bower_components/font-awesome/fonts";
@import "font-awesome/scss/font-awesome";

$fa-font-path を上書きするとアイコンが表示されました!