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

  • 投稿日
  • 更新日
  • 著者 しんぺー
  • カテゴリー Code
  • カテゴリー CSS
  • カテゴリー HTML

FontAwesomeをすぐ使いたい人

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

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

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

完成形のイメージ

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

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