0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

FontAwesomeの導入

Last updated at Posted at 2023-03-26

FontAwesomeの導入していこう!

無料で使えるフォントがあります!そのなかでFontAwesomeが使いやすいかな
と思いますので導入方法紹介したいと思います:woman:

インストール方法

①下記のコマンドを打ちインストールしていきます

$ yarn add @fortawesome/fontawesome-free@5.15.4

インストールされたらこんな感じで表示されると思います。

yarn add v1.22.19
warning ../../package.json: No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ @fortawesome/fontawesome-free@5.15.4
info All dependencies
└─ @fortawesome/fontawesome-free@5.15.4
Done in 6.45s.

import '@fortawesome/fontawesome-free/js/all'をapp/javascript/packs/application.jsに追加記述

app/javascript/packs/application.js
import "bootstrap";
import "../stylesheets/application" 
import '@fortawesome/fontawesome-free/js/all'  #追加してください

@import '~@fortawesome/fontawesome-free/scss/fontawesome';
をapp/javascript/stylesheets/application.scssに追加記述

app/javascript/stylesheets/application.scss
@import '~bootstrap/scss/bootstrap';
@import '~@fortawesome/fontawesome-free/scss/fontawesome';  #追加してください

これでFontAwesomeを使える準備が完了です。

0
0
0

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
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?