概要
初学者の私が経験した、Fontawesomeが表示できない時の解決策を3パターン紹介します。
この記事は、「なんだ、そんなことか」となる内容ですが、右も左も分からない当時の私にとっては、とても大きな壁に見えたので、共有します。
目次（結論）
＜パターン1＞
・閲覧しているバージョンが違う。
＜パターン2＞
・有料アイコンを導入しようとしている。
＜パターン3＞
・CSSの記述漏れ。
開発環境
・Cloud9
・Ruby
・Ruby on Rails
・使用gem: font-awesome-sass,'~> 5.15.1'
＜パターン1＞閲覧しているバージョンが違う。
説明
「閲覧しているバージョン」とは、Fontawesomeの公式サイトで実際に検索しているバージョンのこと。
検索しているバージョンと、使用しているgemが異なる場合、アイコンのクラス名が違い、正しく表示されなくなります。
(例)
・Ver.6の場合: <i class="fa-solid fa-user"></i>
・Ver.5.15.4の場合: <i class="fas fa-user"></i>
使用しているgem内容が次の場合、後述する検索バーのように、バージョンを「5.15.4」で選択してください。
gem 'font-awesome-sass', '~> 5.15.1'
バージョン指定方法
下記画像のように、Fontawesomeの公式サイトを開くと、検索バーにバージョンが記載されています。
赤枠部分の▼をクリックして、使用しているバージョンに合わせてください。
(下記画像は、イメージです。)
＜パターン2＞有料アイコンを導入しようとしている。
説明
Fontawesomeは、一部に有料プランのアイコンが含まれます。
そのため、検索する時に無料プランでの絞り込みをしないと、誤って有料プランのアイコンを選択しており、導入できていないという事が起こります。
アイコンをクリック後のボタン内に、下記画像の赤枠の表記が出るときは、有料プランのため、注意しましょう。
(下記画像は、イメージです。)
事前に防ぐ方法
公式サイト画面の左側に「Free」と書かれた部分をクリックして、無料プラン内からアイコンを選ぶようにすると、防ぎやすいです。
＜パターン3＞CSSの記述漏れ。
説明
font-awesome-sassは、CSSファイルへの読み込みが必要です。
gemをインストールした後、app/assets/stylesheets/application.css.scss内に、下記の記述をしないと使用できないため、要注意です。
@import "font-awesome-sprockets";
@import "font-awesome";
※上記のような、インストールのみでは使用できないgemは他にもあります。
RubyGemの公式サイトから、gem名で検索をかけて、公式GitHub内の記述を参考にして、使用するようにすると、抜け落ちが減ります。
まとめ
振り返ると、「え～！こんなことか～」と思うミスでも、初学者には、大きい壁に見えるFontawesomeの表示できない問題を、今回はまとめてみました。
その他にも、追加する内容を思い出したら、更新する予定です。
他にもこんなのあるよと、皆さんからの情報もお待ちしております。