~パンピーサラリーマンの為の人生逆転ブログ~

【HTML&CSS】Font Awesomeによるアイコンの使用方法 | MUKKUN QUEST
MUKKUN QUEST     

【HTML&CSS】Font Awesomeによるアイコンの使用方法

HTML&CSS

ページ内に、FontAwesomeのアイコンを挿入する方法を説明します。

スポンサードサーチ

手順➀ HTMLの< head >タグの中に下記を入力する

See the Pen dyPMJwd by 勇者むっくん@人繋ぎの大秘宝Lv2.5 (@mukkun_quest) on CodePen.

手順② < span >タグにクラス名をつける

☝こちらの画像の通りですが、HTML上で欲しい箇所に< span >タグをつけ、クラス名を入力します。
画像の種類と入力すべきクラス名はコチラのFontAwesome公式サイトから探して見て下さい。

スポンサードサーチ

手順③ 必要に応じて、CSSで調整

FontAwesomeは、名前の通りFontなので、CSSで大きさ(Font-size)や色(Font-color)などを指定できます。