目的
Railsで作成したアプリにFont Awesomeを導入する。
開発環境
macOS: Big Sur
Rubyバージョン: 2.6.5
Railsバージョン: 6.0.0
前提
- アプリ
test-appが作成されている。
【Rails】簡単な投稿アプリの作成
手順
Font Awesomeとは
アイコンをアイコンフォントという文字として使うことができるツールの事です。
有料のアイコンもありますが、基本無料で使用できるので気軽に使用できます。
Font Awesomeのインストール
それでは早速始めていきます!
まず下記コマンドでFont Awesomeをインストールをします。
ターミナル
% yarn add @fortawesome/fontawesome-free
scssファイルの設定
次にFont Awesomeを使用するための設定をしていきます。
下記のように記述しましょう！
app/javascript/stylesheets/application.scss
@import '@fortawesome/fontawesome-free/scss/fontawesome';
デフォルトではapplication.scssは存在しなく、application.cssになっているので、
ご自身で書き換えてください！
jsファイルの設定
次にjsファイルの設定です。
app/javascript/packs/application.js
import '@fortawesome/fontawesome-free/js/all';
これで、Font Awesomeを使う準備ができました！
確認
ここまで実装できたら導入できているか、確認してみます。
ビューファイルに下記コードを貼り付けてみましょう！
app/javascript/packs/application.js
<i class="fas fa-arrow-right"></i>
ビューを確認し、「→」が表示されたら成功です！
あとは公式HPから好きなアイコンを見つけて、コードをコピペすればOKです！
Font Awesome
ちなみにCSSでサイズやカラーなども編集可能ですので、ぜひお試しください。
最後に
以上でFont Awesomeの導入は完了です。
簡単に導入できて便利に使えるのでぜひ試してみてください。
では。