教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。
その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。
今回のパートではFont Awesomeを導入していきます。
Font Awesomeを導入することで、Web上でよく利用されるアイコンをアイコンフォントという文字として使うことができます。
本パートでは、下記の画像のようにヘッダーのリスト作成のところにアイコンを表示させます。
では、実際に進めてみましょう。
それでは、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.json12345678 + 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.scss12345 + 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.js12345 + Copied!import 'bootstrap';
import '../stylesheets/application';
import '@fortawesome/fontawesome-free/js/all';
.
// 中略
以上でFont Awesomeの導入は終了です。
実際にFont Awesomeが機能するか確認します。
http://localhost:3000 にアクセスしてください。ヘッダーのリスト作成のところにアイコンが表示されていれば、うまく動作しています。
Font Awesome を導入することで、cssでアイコンを表示できました。
今回のアイコンに該当するコードは下記になります。
app/views/partial/_header.html.erb1 Copied!<i class="fas fa-edit"></i>
fa-edit
はアイコン名になります。このアイコン名はFont Awesome の公式サイトから調べられます。
今回は「edit」のアイコンを利用しています。
以上で今回のパートは終了です。
お疲れ様でした。
今回のアイコンに該当するコードは下記になります。
app/views/layouts/application.html.erb
質問ではないですが、2-4でヘッダの分割を行っているので、正しくは
app/views/partial/_header.html.erb
になると思います。
font-awesomeを導入しようとしたのですがbundle installをするとスクショの画面で止まってしまいます
どうしたらいいでしょうか?