Rails

【Rails】Rails6でFontAwesomeを導入・表示させるための手順を初心者向けに解説

Rails

 

今回は、Rails6でFontAwesomeを導入・表示させるための手順について初心者向けに解説したいと思います。Rails6ではWebpackerというパッケージを使用することにより、以前よりグッと簡単にFontAwesomeを導入することができるようになりました。

Rails5以前でFontAwesomeを使用するには、gemを手動でインストールする必要があります。

FontAwesomeの導入手順

はじめに導入手順について解説します。

以下のコマンドを打ち込み、yarnを用いてFontAwesomeをインストールしましょう。

% brew install yarn
% yarn add @fortawesome/fontawesome-free

 

続いて、JavaScriptとStylesheetsでFontAwesomeを読み込む記述を追記します。

// application.jsの冒頭に以下の記述を追記

import '@fortawesome/fontawesome-free/js/all';
// application.scssの冒頭に以下の記述を追記

$fa-font-path: '@fortawesome/fontawesome-free/webfonts';
@import '@fortawesome/fontawesome-free/scss/fontawesome';
@import '@fortawesome/fontawesome-free/scss/solid';
@import '@fortawesome/fontawesome-free/scss/regular';
@import '@fortawesome/fontawesome-free/scss/brands';
@import '@fortawesome/fontawesome-free/scss/v4-shims';
デフォルトでは「application.css」になっているため、ご自身で「application.scss」に名前を変更しましょう。

 

これでFontAwesomeの導入が完了です。

1分もかからずに導入できるね。

FontAwesomeの表示

では実際にFontAwesomeを表示させるまでの流れについて解説していきます。

まずはFontAwesomeの公式サイトから、使用したいアイコンを検索・選択しましょう。

アイコンを検索

FontAwesome:https://fontawesome.com/

 

今回は、以下の矢印のアイコンを表示させてみます。

矢印のアイコン

 

アイコンを表示させたいビューファイルに以下の記述を追記しましょう。

<i class="fas fa-arrow-alt-circle-right"></i>

 

上記のコードはご丁寧にFontAwesome側が用意してくれているので、アイコン画面からコピー&ペーストすることができます。

アイコンのコード

 

これでアイコンをブラウザ上に表示させることができました。

アイコンはCSSで自由自在にカスタマイズできるので、ご自身のアプリケーションのデザインにあったアイコンに変更していただけたらと思います。

アイコン表示
デフォルトのアイコンはかなり小さいため、上記アイコンは見やすいよう「font-size: 600px;」で表示させています。

参考記事

How to install font-awesome with yarn in Rails 6.0:
https://medium.com/@kelishrestha97/how-to-install-font-awesome-with-yarn-in-rails-6-0-c2506543c13d

 

 

今回はRails6でFontAwesomeを導入・表示させるための手順について解説しました。簡単に、かつ無料で使えるWebフォントなので、ぜひご自身のアプリケーションにも導入を検討していただけたらと思います。