Rails7構築 -その3- importmapでfontawesomeを導入

↓その２の続き

bootstrap5の後にFontAwesomeを導入します。

参考

ほぼここのまんまです。

yarnでfortawesomeをインストール

$ yarn add @fortawesome/fontawesome-free

インストールしたfontawesomeをimportmapにpinします。

$ ./bin/importmap pin @fortawesome/fontawesome-free

config/importmap.rbを変更

fontawesome.js→all.jsに変更

importmap.rb

# pin "@fortawesome/fontawesome-free", to: "https://ga.jspm.io/npm:@fortawesome/fontawesome-free@6.2.1/js/fontawesome.js
pin "@fortawesome/fontawesome-free", to: "https://ga.jspm.io/npm:@fortawesome/fontawesome-free@6.2.1/js/all.js

app/javascript/application.jsにfontawesomeをimport

app/javascript/application.js

//= require jquery3
//= require popper
//= require bootstrap-sprockets
import "@hotwired/turbo-rails"
import "controllers"
import "@fortawesome/fontawesome-free"

確認

fontawesomeのアイコンを追加

index.erb

<h1>
<i class="fas fa-space-shuttle"></i>
<i class="fas fa-snowman"></i>
<i class="fas fa-kiwi-bird"></i>
</h1>

表示されました