【rails】font-awesomeでformにアイコンを使った時のメモ

下の画像の『ファイルを選択』をカメラアイコンにした時のメモです！
補足などありましたらお願いします_:(´ཀ`」 ∠):

font-awesome(フォントオーサム)を使う！

【font-awesomeへの初回認識】
1.awesomeをずっとアウェサムと読んでいたww(意外と多い？多くない？)
2.初回railsで検索したのでRuby On Rails用だと考えていた。

検索した際にrailsで検索したのでrails専用の物だと勘違いしていましたが、違いますよね？（多分）

aplication.scssに以下の項目を記載しようとしたら間違えてactiontext.scssに記述しましたが動きました。

 $fa-font-path: '@fortawesome/fontawesome-free/webfonts';
@import '@fortawesome/fontawesome-free/scss/fontawesome';
@import '@fortawesome/fontawesome-free/scss/solid';
@import '@fortawesome/fontawesome-free/scss/regular';
@import '@fortawesome/fontawesome-free/scss/brands';
@import '@fortawesome/fontawesome-free/scss/v4-shims';

動くんだろうけどこうした方が良いとかありましたら教えていただけると幸いです。
以下も記載します。

import '@font-awesome/fontawesome-free/js/all';

font-awesomeのサイトで無料登録をする！

タイトル通り無料登録します！
無料でもかなりのアイコンが使えるのはありがたいですね(´∇｀)

1.登録が完了したらログインします。
2.『How to Use』の場所にある『Add Your Kit's Code to a Project』を確認！
3.『Copy Kit Code!』でコピーして貼り付けます！

<script src="https://kit.fontawesome.com/2f8d319b58.js" crossorigin="anonymous"></script>

これで準備完了です(o^^o)

アイコンを使おう！

それではアイコンを書いていきます!

ちょっと見にくいかもですが、コードは画像の真上にあります。

<i class="fas fa-camera"></i>

この記述でアイコンが設置できます。
あとはcssで見た目を整えるととりあえず完成です。

ですが、このアイコンをクリックすると動くようにしたいですよね？

formオブジェクトのfile_fieldにアイコンを付けたい！

ここからが個人的にどうするんだろうとずっと頭を悩ませましたww

最終的には以下のようになりました(´∇｀)

 <%= f.label :image, class:"form-image-label" do %>
   <i class="fas fa-camera"></i>
     <%= f.file_field :image, class:"message-hidden" %>
 <% end %>

1.<%= f.label〜do%>でブロックを作成。
2.その中にアイコンのhtmlとfile_fieldを書いてあげたら完成！！

labelの使い方、ブロックの使い方をよくわかっていなかったので長々と苦戦しましたが上手く動いてくれて良かったです！！

内容的に理解不足、雑などあると思いますがメモ帳代わりなのでもし見た方は許してください。