【Rails6】link_toにFontAwesomeを埋め込む具体的方法【コピペOK】

#はじめに
Railsで「link_toの削除ボタンをアイコンで作成したい」と思い、調べた内容をまとめました。

#対象
Railsで成果物を作り始めた人

# 前提
* bootstrapを導入済み
* 今回はrails6で進めています

#ゴール
link_toの表示を 「”文字” → ”アイコン”」 に変更します


**before**
![after.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/690622/b59df1dc-e773-01c7-5aeb-be41ff6d6419.png)

**after**
![before.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/690622/032e4cc3-d9e8-a7f1-54bb-5424f99aeace.png)







# あなたのlink_toの"文字"が"アイコン"になるまで
 ①"Font Awesome"の設定
 ②使用したいアイコンコードを取得
 ③「link_to」に"アイコン"を埋め込む
 



##①"Font Awesome"の設定
今回は参考資料の記事を参考にさせていただきました！
細かい設定も記載されているので、参考にしてください！
[【Rails】font-awesome-sassの使い方を徹底解説！]
(https://pikawaka.com/rails/font_awesome_sass)


**1.font-awesome-sassの導入**

```erb:Gemfile
gem 'font-awesome-sass'
```

```terminal:ターミナル
bundle install
```

```application.scss
@import 'font-awesome-sprockets';
@import 'font-awesome';
```

**2.font-awesome-railsの導入**

```terminal:ターミナル 
brew install yarn

yarn add @fortawesome/fontawesome-free
```

```erb:app/javascript/packs/application.js 
require("@fortawesome/fontawesome-free/js/all")
```


```app/assets/stylesheets/application.scss 
@import "@fortawesome/fontawesome-free/scss/fontawesome";
```









##②使用したいアイコンのコード取得

1.以下のリンクに移動
[Font Awesome]
(https://fontawesome.com/icons?d=gallery)

2.使用したいアイコンを探す
今回は、ゴミ箱アイコンを探し、選択します
![ゴミ箱アイコンの検索.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/690622/055795a9-6797-52ca-27b8-a2fdaaba6cea.png)

3.表示されているコードをコピーする
![ゴミ箱アイコンのコードを取得.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/690622/5e215378-6958-5a82-9d69-a85ff15916c8.png)

**ここで取得したコードを③でlink_toに埋め込みます**
*上記画像の「このコードをコピペする」の部分が今回使用するコードになります





##③「link_to」に"アイコン"を埋め込む
**方法**
以下のコードに先ほど取得した「アイコンのコード」を埋め込みます

削除ボタンの場合

```erb:after
<%= link_to URLヘルパー, class: "btn btn-danger", HTTPメソッドの指定 do %>
   アイコンのコード  #=>　ここに挿入する   
<% end %>

例）
<%= link_to URLヘルパー, class: "btn btn-danger", method: :delete do %>
  <i class="far fa-trash-alt"></i> #=>　アイコンのコード
<% end %>

```

比較として、一般的に使用するlink_toも貼っておきます↓

```erb:before
<%= linl_to "削除" , URLヘルパー ,class: btn btn-primary, method: :delete %>
```



詳しい情報はこちらを参照ください。
[Railsドキュメント リンクを生成](htt
ps://railsdoc.com/page/link_to)




#テンプレート
最初に紹介した画像のコードを記載しておきます。
よかったら使用してください！(URLの部分はご自身でご記入ください）

これです↓

![before.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/690622/98414c22-31d5-dc59-defd-051473c4953b.png)


**詳細ボタン（虫眼鏡)**
  色 => 青　 アイコン=> 虫眼鏡

```erb:詳細
  <%= link_to URL ,class: "btn btn-danger text-white", method: :get do %>
    <i class="fas fa-search"></i> 
  <% end %>
```



**編集ボタン（ペン）**
  色 => 緑　 アイコン=> ペン

```erb:編集
<%= link_to URL, class: "btn btn btn-secondary text-white", method: :get do %>
  <i class="fas fa-pen"></i>
<% end %>
```

**削除ボタン（ゴミ箱）**

  色 => 赤　　アイコン => ゴミ箱

```erb:削除
  <%= link_to  URL , class: "btn btn-danger text-white", method: :delete do %>
    <i class="far fa-trash-alt"></i> 
  <% end %>
```


# まとめ
情報を集めると理解できますが、まとまったページがなかったのでアウトプットとしてまとめした。
ご参考にしていただければ幸いです。



# 補足
**私の失敗例**
以下の２つを実行し、失敗しました。

**①表示する部分に無理やり埋め込む**

```erb:
  <%= link_to "使用したいアイコン" ,URL %>
 　           ---------------             
```



**②classに無理やり突っ込みました。**


```erb
  <%= link_to "削除" ,URL, class:使用したいアイコンのクラス%>
　　　　　　　　　　　　　　　　 -------------------------
```
同じミスをした！と思った方は、ぜひこの記事を参考にしてください！笑



#参考資料
- [【Rails】font-awesome-sassの使い方を徹底解説！]
(https://pikawaka.com/rails/font_awesome_sass)
- [Rails4でlink_toの中にFont Awesomeのアイコンを埋め込む方法!!](https://qiita.com/knt45/items/c76b246ad448f3814ae4)