FontAwesomeの導入

書かれていること

• 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>

参考ページ

• FontAwesome
• 【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう

終わりに

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