RailsでFontAwesomeを使う

## 内容
- FontAwesomeとは
- FontAwesomeを使う準備
- FontAwesomeをhamlで
- FontAwesomeをボタンとして使う（最終目標）
 - link
 - file選択 

初学者の復習も兼ねた投稿ですので、間違い等ありましたらご指摘いただけると嬉しいです。

## FontAwesomeとは
[FontAwesome](http://qiita.com "FontAwesome")

こちらが公式ページです。
アイコンを自由に使えます！一気にサイトがいい感じになります。

## FontAwesomeを使う準備
導入方法はいくつかありますが、今回はRailsで使うのでgemをインストールします。

```:Gemfile
gem 'font-awesome-sass', '~> 5.4.1'
```
```:terminal
bundle install
```
```scss:/assets/stylesheets/application.scss
@import 'font-awesome-sprockets';
@import 'font-awesome';
```
これで準備完了です。

## FontAwesomeをhamlで

```haml
= fa_icon 'edit'
```
これでOKです。

'edit'の部分は、FontAwesomeのページから使いたいアイコンを探して、
そのアイコン名を入れます。

デベロッパーツールで確認してみると、

```html
<i class="fa fa-edit"></i>
```
こんな感じで反映してくれてます。

## FontAwesomeをボタンとして使う

### link_toで使う

<img width="299" alt="スクリーンショット 2019-06-26 22.11.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427185/48ca67d2-1f18-3012-7162-25582c51c7e6.png">
こんなイメージです。

ペンのアイコンが新規作成ページへのリンク、
歯車のアイコンが編集ページへのリンクになってます。

通常のlink_toは

```haml
= link_to "New", root_path
```
のような形で第一引数にリンクの名前、第二引数に行き先を書くと思いますが、
doを使ってブロックにしてあげることでFontAwesomeが使えます。

```haml
= link_to new_path do
  = fa_icon 'edit'
= link_to edit_path(current_user) do
  = fa_icon 'cog'
```
（_pathの部分は仮です）

インデントにご注意！
（そもそもhamlにはdoに対するendが不要ということを知らずにしばらく悩んでしまいました…）

先ほど示したように
```<i class="fa fa-edit"></i>```
このような形になるので、

```scss
i {
  font-size: 1.3em;
  color: black;
    }
```
こんな感じでcssを書いてあげるとスタイルを変更できます。



### file選択のボタンとして使う
<img width="611" alt="スクリーンショット 2019-06-26 22.17.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427185/2a5ddf87-9af3-6b08-af2f-eefebda8ec0b.png">
フォームの端にある写真アイコンを押すと、ファイル選択の画面が開くようになってます。

#### デフォルトの画像選択ボタンを変更

編集の都合上、ちがうサイトを参照します。分かりにくくてすみません。

<img width="425" alt="スクリーンショット 2019-06-27 9.38.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427185/8e9844de-e346-3126-9acb-33a981bd9d1f.png">
元々はこういう「ファイルを選択」ボタンになっていると思います。
これを```display:none;```で見えなくしちゃいます。

で、labelタグをつけて、そこにスタイルをあててあげます。

```haml:haml
.field
  = f.label :image, "ここを押したら画像選択できるよ", class: "label"
  = f.file_field :image, class: "file"
```
```css:scss
.label {
  cursor: pointer;
  font-size: 16px;
  border: 1px solid gray;
  border-radius: 10px;
  padding: 10px;
}

.file {
  display: none;
} 
```
<img width="408" alt="スクリーンショット 2019-06-27 9.51.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427185/690e3725-9508-669b-3cae-271a1898c5f7.png">
こんな感じになりました。

参考:https://proengineer.internous.co.jp/content/columnfeature/7605

#### FontAwesomeに置き換え

ここまで来たらあとは簡単です。
先ほどラベルタグをつけたところを do でブロックにしてFontAwesomeにするだけです。
（くれぐれもインデントにご注意！（二度目））

```haml:haml
= form_for [@group, @message] do |f|
  = f.label :image, class: "main-form__image" do
    = fa_icon "image"
    = f.file_field :image, class: "main-form__image--default"
```
```scss:scss
.main-form__image {
  cursor: pointer;
  i {
    font-size: 1.3em;
    color: black;
  }
  &--default {
    display: none;
  }
}
```
これでこんなボタンを作ることができました！
<img width="611" alt="スクリーンショット 2019-06-26 22.17.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427185/2a5ddf87-9af3-6b08-af2f-eefebda8ec0b.png">


#### 余談

個人的にこの実装に結構悩んで時間を使ってしまったのですが、
なぜかというと、やりたい実装を分解して考えられなかったからです。

検索するときに
「FontAwesomee file選択」
など、いきなりFontAwesomeをfile選択ボタンにするやり方を調べてしまっていました。

が、分解して考えると、
1. デフォルトの選択ボタンを変更する
2. 変更したものをFontAwesomeに置き換える
という手順を踏むことになります。

なので検索も
「file選択　変更」
などにすれば一気に答えに近づきます。

まだプログラミング学習一ヶ月ですが、
エンジニア力はググり力、というのを実感しました。