Foundation Sass for Railsでのアイコン導入

はじめに

CSSフレームワークはBootStrapが有名だと思いますが、弊社のメルプWEB問診ではFoundationを使っていますので、Foundationでの紹介になります。

webサイトを作成していて、アイコンで表記したい場合ありますよね？
印刷は「印刷する」という文字ではなくて「印刷アイコン」で表示とか、「更新する」ではなくて「リロードマーク」で表示とか。アイコンの方が場所を取らないというメリットもありますし。

CSSフレームワークではアイコンもデフォルトでサポートされていますので、そちらを使えば、わざわざフリー素材のアイコンをダウンロードして、ファイルに読み込ませてといった作業をする必要がなくなります。

設定

こちらに方法が簡潔に記載されています。

１）Gemfileにgemを追加
Rails>4の場合は

gem 'sass-rails', "  ~> x.x.x"
gem 'coffee-rails', "~> x.x.x"
gem 'uglifier'
gem 'foundation-icons-sass-rails'

２）bundle install
ターミナルでbundle installしてgemを読み込みます

$ bundle install

3）@import記載
app/assets/stylesheets/application.css.scssファイルに@importを記載してiconファイルを読み込みます。

@import 'foundation-icons';

4）サーバーを一旦停止、再起動
新しく入れたgemを反映するため、railsサーバーを再起動します。
（よくこれを忘れて、インストールしたはずなのに反映されないとなることが、個人的にはあり（汗

5）アイコンのコードを挿入

<i class="fi-[icon]"></i>

[icon]部分を、こちらのサイトより、選んで記載。例えば、印刷アイコンを使いたい場合は、印刷アイコンはprintと記載があるので

<i class="fi-print"></i>

hamlの場合は

%i.fi-print

と記載すると反映されます。アイコンのサイズは、font-sizeで規定されているので、cssファイルで記載するとサイズが変更されます。

.fi-print{
  font-size: 32px; //アイコンサイズを32pxに
}

以上

参考にしたサイト

Foundation Font ICons on Sass for Rails