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

# 💎 実現したい事

![fontawesome.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307359/f96c609d-64e6-f69d-a07d-70e3eb07fc5c.jpeg)
この様に、2つのアイコンをGem`font-awesome-rails`で右に配置したい。

# ⚠️ 表示されないパターン
 　　
１、今回苦戦した現象で、**何も表示されません。**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307359/d8a4048c-5af2-fb0c-742e-2a34a1f500c1.png" width=40%>
考えられる原因パターンは、
・アイコンの記述方法、指定方法が間違えている。
・font-awesomeのバージョン
　

２、こちらは、**表示されたがアイコンが出ない。**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307359/9bd17582-945e-8ca3-d18b-f5b509a6d053.png" width=40%>
・多くの場合は、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を記載し、

```ruby:Gemfile
gem "font-awesome-rails"
```


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

```haml: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`と表示されます。
<img width="388" alt="スクリーンショット 2019-11-07 2.54.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307359/9f5627fa-811f-8d93-8117-14e943a6b01a.png">


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

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

```haml: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"}
```

これで表示されました。
表示されない場合は書き方が間違っている可能性があります。
![fontawesome.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307359/f96c609d-64e6-f69d-a07d-70e3eb07fc5c.jpeg)

これで何も表示されない場合は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`を導入

```ruby:Gemfile
gem 'font_awesome5_rails'
```

`bundle install`を実行する。

次に、importを記載します。

```scss:application.scss
@import 'font_awesome5_webfont';
@import 'font_awesome5.css';
```
　
すると呼び出す事が成功しました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307359/9bd17582-945e-8ca3-d18b-f5b509a6d053.png" width=40%>

## 現象２

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

### ・font-familyの指定

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

```
font-family: "Font Awesome 5 Free";
```
　
これで表示されました。
![fontawesome.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307359/f96c609d-64e6-f69d-a07d-70e3eb07fc5c.jpeg)

---

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

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