カテゴリー
サインイン 新規登録

間違いや改善の指摘

内容の技術的な誤り・誤字脱字やミスのご報告・解説やトピックの追記/改善のご要望は教材をさらに良くしていく上でとても貴重なご意見になります。

少しでも気になった点があれば、ご遠慮なく投稿いただけると幸いです🙏

実際には誤りではなく勘違いであっても、ご報告いただけることで教材のブラッシュアップにつながります。

質問ポリシー①

教材受講者みなさんのスムーズな問題解決のために、心がけていただきたいことがあります。

教材の内容に関する質問を投稿しましょう

教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。

その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。

2-5

Font Awesome の導入

今回のパートではFont Awesomeを導入していきます。

Font Awesomeを導入することで、Web上でよく利用されるアイコンをアイコンフォントという文字として使うことができます。

本パートのゴール

本パートでは、下記の画像のようにヘッダーのリスト作成のところにアイコンを表示させます。

image

ゴールまでの流れ

  1. Font Awesome の導入
  2. Font Awesome が導入されたか確認

では、実際に進めてみましょう。

1. Font Awesome の導入

それでは、Font Awesome を導入していきます。Bootstrapと同様yarnを使って導入します。以下のコマンドを実行してください。

console
Copied!
yarn add @fortawesome/fontawesome-free

コマンドを実行すると、次のような結果が表示されます。

console
Copied!
yarn add @fortawesome/fontawesome-free yarn add v1.16.0 [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... warning " > webpack-dev-server@3.11.0" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0". warning "webpack-dev-server > webpack-dev-middleware@3.7.2" has unmet peer dependency "webpack@^4.0.0". [4/4] 🔨 Building fresh packages... success Saved lockfile. success Saved 1 new dependency. info Direct dependencies └─ @fortawesome/fontawesome-free@5.15.1 info All dependencies └─ @fortawesome/fontawesome-free@5.15.1 ✨ Done in 5.19s.

package.json ファイルには以下のコードが追加されます。

pacakge.json
12345678
+
Copied!
{ "name": "kanban", "private": true, "dependencies": { "@fortawesome/fontawesome-free": "^5.15.1", "@rails/actioncable": "^6.0.0", "@rails/activestorage": "^6.0.0", "@rails/ujs": "^6.0.0",

次に、app/javascript/stylesheets/application.scssにFont Awesome のCSSを読み込みます。

app/javascript/stylesheets/application.scss
12345
+
Copied!
@import '~bootstrap/scss/bootstrap'; @import '~@fortawesome/fontawesome-free/scss/fontawesome'; @import "custom";

次にyarnでインストールした Font Awesome のパッケージを利用できるようにimportします。

app/javascript/packs/application.js に以下のコードを追加してください。

app/javascript/packs/application.js
12345
+
Copied!
import 'bootstrap'; import '../stylesheets/application'; import '@fortawesome/fontawesome-free/js/all'; . // 中略

以上でFont Awesomeの導入は終了です。

2. Font Awesome が導入されたか確認

実際にFont Awesomeが機能するか確認します。

http://localhost:3000 にアクセスしてください。ヘッダーのリスト作成のところにアイコンが表示されていれば、うまく動作しています。

image

Font Awesome を導入することで、cssでアイコンを表示できました。

今回のアイコンに該当するコードは下記になります。

app/views/partial/_header.html.erb
1
Copied!
<i class="fas fa-edit"></i>

fa-editはアイコン名になります。このアイコン名はFont Awesome の公式サイトから調べられます。

今回は「edit」のアイコンを利用しています。

Font Awesome - edit

以上で今回のパートは終了です。

お疲れ様でした。

現在のパート (3)
全パート (121)
みんなで助け合おう!
現在のパートのディスカッション 全3件
2-5
pompompain7 2021-03-31
アイコン名を指定しているファイルについて

今回のアイコンに該当するコードは下記になります。
app/views/layouts/application.html.erb

質問ではないですが、2-4でヘッダの分割を行っているので、正しくは
app/views/partial/_header.html.erb
になると思います。

2-5
福原弘樹 2020-04-21
質問です

font-awesomeを導入しようとしたのですがbundle installをするとスクショの画面で止まってしまいます
どうしたらいいでしょうか?

image

2-5
HooChang 2020-04-10
質問です

「content: "\f044"; 」の f044 のところをチートシートを参照し書き換えても、アイコンが変更されないのですがなぜでしょう。

例えば、content: "\f641"; であればADのアイコンになると思われるのですがうまく反映されません。