importmapを使う場合
Copy
yarnを使う場合
1
./bin/importmap pin @fortawesome/fontawesome-free @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons
Copy
アプリケーションに導入する
1
yarn add @fortawesome/fontawesome-free @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons
Copy
application.js
1
2
3
4
5
6
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { library } from "@fortawesome/fontawesome-svg-core";
import '@fortawesome/fontawesome-free'
library.add(fas, far, fab)
アイコンを使う
Copy
*.html.erb
1
2
<i class="fa-solid fa-house"></i>
<!-- など -->
以上です。簡単にFontAwesome 6が使えるようになりました。
Font Awesome 6アイコン検索ページ: https://fontawesome.com/search?o=r&m=free
この記事はQiitaのマイページにも掲載しました。
Updated by Yuto at 2023-05-09 21:05