書かれていること

FontAwesomeとは？
Hamlで使う時
1.FontAwesome用のgemをインストールする
2.importする
3.Hamlの記述方法
Htmlで使う時
1.HTMLファイルに記述
参考ページ
終わりに

FontAwesomeとは？

ウェブフォントの一種で、文字を扱うのと同じようにアイコンを表示させることができる

Hamlで使う時

1.FontAwesome用のgemをインストールする

Gemfile

gem 'font-awesome-sass'
# 最下部に追加する

Gemfileに追記したら、bundle installしてサーバーを再起動

2.importする

application.scss

@import "font-awesome";

3.Hamlの記述方法

表示したいページ.html.haml

.クラス名
 = fa_icon 'acorn', class: 'icon'

FontAwesomeのページを見て使いたいアイコンを探す

別の記述

Gemfileに記述してbundleまでは同じ

application.scss

@import "font-awesome-sprockets";
@import "font-awesome";

表示したいページ.html.haml

%i.fa.fa-acorn　←これでできてる人もいましたが私はだめでした

# または
= icon('fab', 'twitter')#←右側はFontAwsomeの公式ページをみて表示したいアイコン名を入れてね（この記述は成功！）

= icon('fas', 'image', class: 'icon')#こうするとクラスの指定もできるのでscssが当てられる

アイコンカスタム！色を変えたりできる
Font Awesome 5の使い方とカスタマイズ方法を徹底解説！

HTMLで使う時

1.HTMLファイルに記述

head内にリンクを記述
任意の場所にアイコンの記述をする

表示したいページ.html.erb

# headの中
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
### 中省略
<div class="iconのクラス名">
 <i class="fas fa-acorn"></i>　#ここが丸々、アイコンをさすコード
</div>

参考ページ

終わりに

hamlの旧形式とHtmlで記述をしていたのですが
Hamlで新しい書き方があるようで忘備録として書いてみました。
別アプリ実装の時に気づいたことがあれば随時、更新予定です。
間違った記述等ございましたら、ご指摘いただけると幸いです。