#font-awesomeとは
ページ上にアイコンを表示させることができます。
こんなんです↓
無料だけでも1544種類あるので十分すぎると思います。
今回はCDNを使って実装します。
手順はたった2つです。
#手順1
HTMLのheadタグ内に、
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
を貼り付ける。
<head>
略
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
</head>
headタグの一番下に貼り付けとけば大丈夫です。
hamlの場合↓
application.html.haml
%head
略
%link{href: "https://use.fontawesome.com/releases/v5.6.1/css/all.css", rel: "stylesheet"}
#手順2
使いたいアイコンのコードをコピーして表示させたい位置に貼り付けます。
例えばAmazonのアイコンの場合は、
上の方にあるコード
<i class="fab fa-amazon"></i>
をコピーして好きなところに貼り付ければOKです！
このアイコンはクラス名を振って、CSSで色や大きさを変更することも可能です。 font-awesomeを使ってデザインの幅を広げましょう！！
ではまた！