font-awesomeとは？Railsアプリケーションで、font-awesome-sassというgemライブラリをアプリケーションにインストールする
font-awesomeとは?
Font Awesomeとは、Viewファイルで特定の文字列を指定して、ライブラリで用意されている
アイコン(webアイコンフォト)を表示することを可能にしたツールです。
例えば、
コード内に、
<i class='fa fa-check'></i>
という文字(=コード)を記述することで、「✔️」というアイコンを表示させることができるようになるのです。
Webアイコンフォントとは？
ウェブページ上で文字と同じように表示できるアイコンのことで、Font Awesomeで用意されています。通常のアイコンは画像なので拡大するとぼやけてしまいますが、画像でアイコンを貼るのと違い、拡大してもぼやけませんし、cssを使って色もサイズも簡単に変えることができます。
font-awesome-sassとは？
font-awesome-sassとは、無料で使えるwebフォントアイコンであるFont Awesomeを簡単にrailsで使えることができるようになるgemです。
font-awesomeの導入からwebアイコンを表示させるまで
手順
手順1. font-awesome-sassgemライブラリをインストール
① Gemfileに追記する
gem 'font-awesome-sass', '~> 5.12.0'
gem 'font-awesome-rails' では、font-awesome5系に対応していないので gem 'font-awesome-sass'を使用する必要があります。
$ bundle insall
② マニフェストファイルでfont-awesomeを読み込ませる(import)
font-awesomeをマニフェストファイルであるapp/assets/stylesheets/application.scssに読みこませる。
@import "font-awesome-sprockets"; @import "font-awesome";
font-awesome-sprocketsファイルには、フォントファイルへのパスを見つける機能が入っています。ですので、importする必要があります。つまり、これをimportしてしまえば、自動でフォントファイルを探してくれるので、一つ一つフォントファイルをimportする必要がなくなり便利です。- scssファイルには
*= requireなどのSprocketsディレクティブの記載が残っていると、@importで定義した内容がうまく読み込めずbootstrapが反映されないので注意してください。
//= requireと@importの違い
どちらもマニフェストファイルで、アセットファイルを読み込み結合するために記述します。
//= とは？
JSのマニュフェストファイルでは//=で始まる行をアセットパイプラインに指示を与えるための特別な行として扱っています。
//= requireとは？
指定したJSファイルの内容を記述した位置に取り込みます。(拡張子は省略できます。)
//=require_treeとは？
JSファイルで指定されたディレクトリ配下の前ファイルの内容を結合し、記述した位置に取り込みます。「.」と記述すると指定されたディレクトリ配下のの全ファイルの内容を結合します。
※この記述は一番下に記述することが大切です。
ディレクティブは記載した順に実行されますが、require_treeでインクルードされるファイルの読み込み順序は指定できません。従って、特定の読み込み順に依存しないようにする必要があります。もしどうしても特定のJavaScriptファイルを他のJavaScriptファイルよりも結合順を先にしたい場合、そのファイルへのrequireディレクティブをマニフェストの最初に置きます。requireおよび類似のディレクティブは、出力時に同じファイルを2回以上インクルードしないようになっています。[Railsガイドより]
例えば、以下の場合
//= require jquery3 //= require popper //= require bootstrap-sprockets
//= require jquery3よりも前に//= require_tree .を記載した場合、//= require_tree .で読み込んだファイルでjqueryのコードを参照しているとjquery3が読み込まれる前に評価されるためメソッドが未定義となりエラーになるケースが発生します。
そのため、//= require_tree . は一番下の行に記載している必要があります。
@importとは？
SCSSのマニフェストファイルで読み込むアセットファイルを指定する場合に使用します。
//= requireと@importまとめ
- //= require →
JSマニフェストファイルで使用 - @import →
SCSSマニフェストファイルで使用
手順2. Font Awesomeを使って、Webアイコンの表示させる
Font Awesomeの使い方
Font Awesomeのアイコンはビューファイルで下記のように記述すると表示させることができます。
<i class="接頭辞名 fa-アイコン名"></i>
接頭辞名はversion5から5種類になり、アイコンごとに異なります。
① 使いたいアイコンフォントを探す
アイコン一覧から使いたいアイコンを選びます。アイコンが決まったら、使いたいアイコンをクリックします。
② アイコンフォントのコードをコピー
アイコンの詳細ページが開きます。下にスクロールして、というコードをまるっとコピーします。
③ アイコンを表示させたい位置に貼付け
コピーしたコードをHTML内のアイコンを表示させたい位置に貼り付けます。これだけで以下のようにアイコンフォントを使うことができます。
<p><i class="fab fa-twitter"></i>ここにアイコンを表示</p>
これで、ツイッターのアイコンが表示されるようになります。
その他の操作
アイコンの大きさを変える
<i class="fas fa-tasks fa-lg"></i>
FontAwesomeでは、アイコンの大きさを簡単に変えることができます。以下のコードを
i class="〜"内に書くことでサイズを大きくすることができます。
- fa-lg (1.333…倍)
- fa-2x (2倍)
- fa-3x (3倍)
- fa-4x (4倍)
- fa-5x (5倍)
<p><i class="fas fa-bomb fa-lg"></i></p> <p><i class="fas fa-bomb fa-2x"></i></p> <p><i class="fas fa-bomb fa-3x"></i></p> <p><i class="fas fa-bomb fa-4x"></i></p> <p><i class="fas fa-bomb fa-5x"></i></p>
ヘルパーメソッドicon
アイコンの表示の記述を簡単に書くことができるヘルパーメソッドです。
icon('接頭辞名', 'アイコン名') # 例 <%= icon('far', 'clock') %>
上のコードは下記のコードにコンパイルされます。
<i class="far fa-clock"></i>
詳しい使い方は、以下参照↓
参考
GitHub - FortAwesome/font-awesome-sass: Font-Awesome Sass gem for use in Ruby/Rails projects
