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

FontAwesomeをすぐ使いたい人

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

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

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

完成形のイメージ

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

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

HTMLのみで指定する方法

HTMLのみで指定

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

CSSで指定する場合

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関連の記事は丁寧な記事?が多いですが「長いなーーー」と思ったので、簡単に短く書いてみました。
最後までありがとうございました!