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のみで指定する方法

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

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

この記事を書いた人

アバター

しんぺー

Web制作会社のフロントエンドエンジニア。
2019年9月よりWeb制作を独学、2021年3月ジョブチェンジでエンジニアに。

プログラミングを始めたい方や、学習中の方、副業・転職したい方に向けて発信していますが、業務で覚えた技術がメインになってます。

趣味は音楽です。下の「ウェブサイト」に趣味で作ったサイトをリンクしていますので、興味ある方はどうぞ。