search
LoginSignup
1

posted at

updated at

Ruby on Rails 7にFont Awesome 6を導入

importmapを使う場合

./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を使う場合

yarn add @fortawesome/fontawesome-free @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons

アプリケーションに導入する

application.js
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)

アイコンを使う

*.html.erb
<i class="fa-solid fa-house"></i>
<!-- など -->

以上です。簡単にFontAwesome 6が使えるようになりました。

Font Awesome 6アイコン検索ページ: https://fontawesome.com/search?o=r&m=free

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
1