FontAwesomeを5秒で表示【コピペ用】

FontAwesomeをすぐ使いたい人

FontAwesomeを5秒で使えるようにして下さい。
使い方の記事はたくさんあるけど長くて読めません。

はい、こちらです。
https://codepen.io/shimpei/pen/RwBZxpw
HTMLのみで表示する場合、CSSでクラスを指定して表示する場合の２パターンを掲載しました。
コピペですぐ使えます。

もうすこし説明欲しい方向けに、これから説明しますね。

完成形のイメージ

CodePenを貼りました。
指定の仕方は２種類あります、詳細は下です。

See the Pen Untitled by shimpei (@shimpei) on CodePen.

<p>
  <i class="fa fa-book" aria-hidden="true"></i>
  HTMLのみで指定
</p>

HTMLのみで指定する場合はこんな感じです。
赤色にしたfa-bookこれでアイコンを指定しています。
アイコンを調べる場合はこちらを参照してください。

HTMLで付けたクラスにCSSでアイコンを指定します。
content: "\fここにアイコン"

HTML
<!-- CSSで指定 -->
<div class="ver-css">CSSで指定</div>

CSS
// CSSで指定
.ver-css {
  &::before {
  font: var(--fa-font-solid);
  content: "\f007";
  }
}

上手く表示されましたでしょうか？
時間の無駄なくこちらの記事で解決できていれば嬉しいです。
fontawesome関連の記事は丁寧な記事？が多いですが「長いなーーー」と思ったので、簡単に短く書いてみました。
最後までありがとうございました！