【Rails】gem "font-awesome-rails"が機能せず何も表示されない時の対処法

6797 ワード
haml Rails scss FontAwesome Ruby Ruby テキストリンク

💎 実現したい事


この様に、2つのアイコンをGemfont-awesome-railsで右に配置したい。

⚠️ 表示されないパターン

　　
１、今回苦戦した現象で、何も表示されません。

考えられる原因パターンは、
・アイコンの記述方法、指定方法が間違えている。
・font-awesomeのバージョン
　

２、こちらは、表示されたがアイコンが出ない。

・多くの場合は、cssにてfont-famiryを指定出来ていない。
・その他一部、cssにて指定する必要がある。（公式を参照）

問題が起きた環境

・Mac
・rails（5.0.7.2）
・haml（5.1.2）
・gem "font-awesome-rails"（4.7.0.5）

前提

・文法が間違っていないか確認しましょう、数パターン書ける方法があります。
・bundle installとサーバーの立ち上げ直しなども見直しましょう。

現象１

Gemfileにてfont-awesome-railsを記載し、

Gemfile
gem "font-awesome-rails"

bundle installをしてapplication.scssにてimportするも何も表示されない。

index.html.haml
%ul.side-header__box__menu
  %li.side-header__box__menu__new-group
    =link_to "#" do
      = fa_icon 'edit', class: "fa fa-edit"
  %li.side-header__box__menu__edit-user
    =link_to edit_user_path(current_user) do
      = fa_icon 'cog', class: "fa fa-cog"

Google Chromeの検証画面を見るとclassみたいに判定されていました。

反映されている場合は、::beforeと表示されます。

::beforeが無い場合、記載ミスでclassとして判定されているように思えますが、
呼び出せていない可能性が高いです。

原因の究明として、まずheadにCDNを挿入してみましょう。
これはGemを使用せず、URLから呼び出す感じです。

application.html.haml
!!!
%html
  %head
    %meta{content: "text/html; charset=UTF-8", "http-equiv":"Content-Type"}/
    // 追加する
    %link{href: "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css", rel: "stylesheet"}

これで表示されました。
表示されない場合は書き方が間違っている可能性があります。

これで何も表示されない場合はbundle install後に、
サーバーを立て直してないなどを疑ってみてください。

・Gemで表示させる

原因は、Gemと判明しました。
バージョンにより読み込みが出来ていない可能性があります。
なのでfont_awesomeの別バージョンのGemを使用してみましょう。

前の font-awesome-rails は削除します。
ターミナルにて
１、bundle exec gem uninstall font-awesome-rails で、Enter
２、Gemfileから削除
３、bundle update で、Enter

・font_awesome5_railsを導入

Gemfile
gem 'font_awesome5_rails'

bundle installを実行する。

次に、importを記載します。

application.scss
@import 'font_awesome5_webfont';
@import 'font_awesome5.css';

　
すると呼び出す事が成功しました。

現象２

四角の状態は、呼び出せているが表示が上手く出来ていません。

・font-familyの指定

SCSSまたは、CSSにてアイコンに対して下記を指定する必要があります。

font-family: "Font Awesome 5 Free";

　
これで表示されました。

以上で、解決いたしましたが他にもありましたら、
コメントなどで、よろしくお願いいたします。
　

GitHub
https://github.com/aocattleya
🐦 Twitter
https://twitter.com/aocattleya