前のパートに戻る 完了して次のパートへ  

  2-5 font-awesome-sassの導入

今回のパートではfont-awesome-sassを導入していきます。

font-awesome-sassを導入することで、Web上でよく利用されるアイコンをアイコンフォントという文字として使うことができます。

公式ドキュメントはこちらです。

参考)font-awesome-sass

本パートの目標物


本パートでは、下記の画像のようにヘッダーのリスト作成のところにアイコンを表示させます。

目標物を作成するまでの流れ


  1. 公式ドキュメントに沿ってfont-awesome-sassを導入
  2. font-awesome-sassが導入されたか確認

公式ドキュメントを見ながら、font-awesome-sassを導入していきます。ドキュメントを見ながらやるので、導入方法を覚える必要はありません。

(エンジニアは公式ドキュメントを見ながら実装することが多々あるので、ここでドキュメントを見るという行為に少しでも慣れていただければと思います。)

では、実際に進めてみましょう。

1. 公式ドキュメントに沿ってfont-awesome-sassを導入

まず今回導入するfont-awesome-sassの公式ドキュメントにアクセスしてください。

公式ドキュメント)font-awesome-sass

アクセスしたら公式ドキュメントの「a. Ruby on Rails」のところを見てください。

「In your Gemfile include」とあるので、Gemfileの最下部に以下のコードを追加します。

kanban
└── Gemfile

追加したgemを反映させるためにbundle installを実行します。

$ bundle install

これでGemを追加できました。

FontAwesomeのstyleをimportする


またドキュメントを見てみましょう。

「Import the FontAwesome styles」とあるので、app/assets/stylesheets/application.scssにFontAwesomeのstyleをimportする記述を追記します。

application.scssファイルに以下のコードを追加してください。

app
└── assets
    └── stylesheets
        └── application.scss

以上でfont-awesome-sassの導入は終了です。

2. font-awesome-sassが導入されたか確認


実際にfont-awesome-sassが機能するか確認します。

まずローカルサーバーを再起動してください。(サーバーが既に立ち上がっている場合は、control + Cでサーバーを終了させることができます。そのあと「rails server」コマンドでサーバーを立ち上げてください。)

先ほどfont-awesome-sassのGemを追加しましたが、サーバーを一度再起動しないと追加したGemが反映されないからです。

再起動したら、http://localhost:3000 にアクセスしてください。ヘッダーのリスト作成のところにアイコンが表示されていれば、うまく動作しています。

font-awesome-sassを導入することで、cssでアイコンを表示できます。

今回のアイコンに該当するcssのコードは下記になります。(前回のパートで追加したcustom.scssのコードになります。)

上記のコードのcontentプロパティでアイコンの種類を指定しています。

content: "\f044";のようなcontentプロパティの値は、チートシートで確認することが出来ます。

Font Awesome Free's Cheatsheet

以上で今回のパートは終了です。

お疲れ様でした。

議論

0 質問

このコースの評価は?