Rails6でFont Awesome 5 を使う

## はじめに
rails6でFontAwesome5を使う機会があったのでその導入方法を共有します。
（rails5もほぼ同じだと思います）
今回は、CDN(リンクを使って読み込む方法)ではなくgemを使っていきます。


## 開発環境
rails 6.0.2
ruby 2.6.5

## 最低限のセットアップ

**※必要に応じてファイル名等変えてください**

rails new アプリ名 -d postgresql   
rails db:create  
rails g controller fonts  

## gemの導入

以下を追記しbundle install

```rails:Gemfile
(省略)
gem 'font-awesome-sass'
```
## コードの記述

#####root画面を設定します。def indexをfontsコントローラに書きます（説明のための便宜上）

```rails:config/routes.rb
Rails.application.routes.draw do
  root to: 'fonts#index'
end
```

```rails:app/controllers/fonts_controller.rb
class FontsController < ApplicationController
  def index; end
end
```

#####stylesheetsの記述です(アイコンの色はピンクにしています）

```rails:app>assets>stylesheets>components>maps.scss
.icons {
  padding:  10px;
  display: flex;
  flex-wrap:wrap;
}

.icon {
  color: pink;
  margin:  10px;
}
```
- application.cssをapplication.scssに書きかえfont-awesomeをimportします


```rails:app>assets>stylesheets>application.scss
@import "font-awesome-sprockets";
@import "font-awesome";
```

#####Viewにfont-awesomeの記述をします
家のアイコンを出してみます。


```rails:app>views>fonts>index.html.erb
<h5>FontAwesomeアイコン</h5>
<div class="icons">
    <div class="icon">
        <%= icon('fas','home')%>
    </div>
</div>
```

##### ここまでの出力です

<img width="734" alt="スクリーンショット 2019-12-31 13.42.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558790/af72618d-855e-45dd-62e6-ef0355af6815.png">

##### サイズを調整し複数アイコンを並べます。
classのfa-3xでサイズ調整、fa-fwで各アイコンの幅を揃えています。

```rails:app>views>fonts>index.html.erb
<h5>FontAwesomeアイコン</h5>
<div class="icons">
　　<div class="icon">
　　　　<%= icon('fas','home',class: "fa-3x fa-fw" )%>
　　</div>
　　<div class="icon">
　　　　<%= icon('fas','star',class: "fa-3x fa-fw" )%>
　　</div>
　　<div class="icon">
　　　　<%= icon('fas','taxi',class: "fa-3x fa-fw" )%>
　　</div>
　　<div class="icon">
　　　　<%= icon('fas','train',class: "fa-3x fa-fw" )%>
　　</div>
</div>
```
<img width="734" alt="スクリーンショット 2019-12-31 13.46.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558790/6187c782-fe1d-5ff1-e520-8ec2d371464a.png">
##自分が使いたいアイコンを探しましょう
以下のサイトでアイコンを探してみましょう。有料のものと無料のものがあります。
[FontAwesome](https://fontawesome.com/icons?d=gallery)

今回はいいね!ボタンを探してみます。
↓
thumbs-upの名前でみつかりました!
<img width="1680" alt="スクリーンショット 2019-12-31 14.02.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558790/23a6fb3f-ab8f-93dd-0cba-84f6cc065024.png">

アイコンの上に\<i class="far fa-thumbs-up">\</i>という記述があります。　　
railsのviewで使う際は<%= icon('far','thumbs-up')%>とすることでアイコンを出すことができます。
(iconメソッドはヘルパーなので別の書き方ももちろんできます。）

viewに記述します。

```rails:app>views>fonts>index.html.erb
<h5>FontAwesomeアイコン</h5>
<div class="icons">
  <div class="icon">
    <%= icon("far","thumbs-up",class: "fa-5x", style: "color: rgb(97,103,112);")%>
  </div>
</div>
```
<img width="991" alt="スクリーンショット 2019-12-31 14.13.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558790/99c300f8-3e9e-bcbf-7075-a035dca5fb60.png">

##自分の好みにカスタマイズします
いいね!ボタンを回転させたり方向を変えたりしてみます。

```rails:app>views>fonts>index.html.erb
<h5>FontAwesomeアイコン</h5>
<div class="icons">
  <div class="icon">
    <%= icon("far","thumbs-up",class: "fa-5x fa-pulse", style: "color: rgb(97,103,112);")%><br>
    <%= icon("far","thumbs-up",class: "fa-5x fa-rotate-180", style: "color: rgb(97,103,112);")%>
    <%= icon("far","thumbs-up",class: "fa-5x fa-rotate-270", style: "color: rgb(97,103,112);")%>
    <%= icon("far","thumbs-up",class: "fa-5x fa-flip-horizontal", style: "color: rgb(97,103,112);")%>
    <%= icon("far","thumbs-up",class: "fa-5x fa-flip-vertical", style: "color: rgb(97,103,112);")%>
  </div>
</div>
```
![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558790/5f65441a-b61f-7b02-65a0-74b13c44d910.gif)

##アイコンにリンクを張ります
書き方が変わります。（pathは変えてください）

```rails:app>views>fonts>index.html.erb
<h5>FontAwesomeアイコン</h5>
<div class="icons">
  <div class="icon">
    <%=link_to(content_tag(:i,'いいね!',class:"far fa-thumbs-up fa-3x",style: "color: rgb(97,103,112);"),root_path)%>
  </div>
</div>
```
<img width="915" alt="スクリーンショット 2020-01-01 19.44.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558790/cd61d365-4e31-faac-d8c9-5fb45fb9562d.png">



##最後に
その他多くのカスタマイズができます。
以下のサイトが参考になります。
[w3shools.com](https://www.w3schools.com/icons/fontawesome5_intro.asp)

最後まで読んでいただきありがとうございました。