【爆速】Rails6にフォントオーサム(Font Awesome 5)を導入する方法

フォントオーサム(Font Awesome 5)を導入する方法

Font Awesome 5をインストール

コマンドで下記を実行

yarn add @fortawesome/fontawesome-free

成功すると、下記のような表示

yarn add v1.22.4
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > webpack-dev-server@3.11.0" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "webpack-dev-server > webpack-dev-middleware@3.7.2" has unmet peer dependency "webpack@^4.0.0".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
warning Your current version of Yarn is out of date. The latest version is "1.22.5", while you're on "1.22.4".
info To upgrade, run the following command:
$ brew upgrade yarn
success Saved 1 new dependency.
info Direct dependencies
└─ @fortawesome/fontawesome-free@5.15.1
info All dependencies
└─ @fortawesome/fontawesome-free@5.15.1
✨  Done in 4.50s.

application.jsにimportする

app/javascript/packs/application.jsに下記を追加

import '@fortawesome/fontawesome-free/js/all'

フォントオーサムからアイコンを選んで記述

https://fontawesome.com/icons?d=gallery

<i class="fas fa-plus fa-fw"></i>

これで終わりです。

他にもこんな記事があります!