, ,

[Middleman 3] Middleman: font-awesome-sass を gem で手っ取り早くインストールする

公開日: 2015/11/26
更新日: 2018/10/19

middleman v.4.0 のリリースが近づいているようなので、これまで触って得たナレッジをまとめておきたいシリーズ。

% middleman version
Middleman 3.4.0

こちらをベースに追加設定のみ。

middleman: bootstrap-sass + jquery のプロジェクトを gem で手っ取り早く立ち上げる | deadwood

font-awesome-sass のインストール

Gemfile に font-awesome-sass （公式）を追加します。

FortAwesome/font-awesome-sass

Gemfile
source 'https://rubygems.org'
gem 'middleman', '~>3.4.0'
gem 'font-awesome-sass', '~> 4.4.0'

インストールします。

% bundle install --path vendor/bundle

動作確認

設定とサンプルコードを追加し、動作を確認します。

CSS(SASS), Font の設定

CSS に Font Awesome の読込設定を加えます。

source/stylesheets/all.css
@charset "utf-8"
@import "font-awesome-sprockets";
@import "font-awesome";

erb ファイルに下記を加え、アイコンフォントが読み込まれていることを確認します。

source/index.html.erb
<button type="button" class="btn btn-default btn-lg">
  <span class="fa fa-cog fa-spin" aria-hidden="true"></span> Font Awesome icons
</button>

以上で利用可能となります。