Yuto Blog

Yuto Blog

Ruby on Rails 7にFont Awesome 6を導入

importmapを使う場合

Copy
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
yarnを使う場合
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

Created by Yuto at 2022-10-10 06:00
0
Like this article
Le Minh Thien Toan

Tác giả:Yuto Yasunaga

Xin chào các bạn. Mình là kỹ sư IT đang làm việc ở Nhật Bản. Mình tạo blog này để chia sẻ về cuộc sống và những kinh nghiệm trong quá trình học tập và làm việc.
Hy vọng bài viết này sẽ có ích cho bạn.