【Font Awesome】背景画像として使用する方法【CSS】

ケケンタ

Font Awesomeって簡単にアイコンを挿入できて便利だけど、背景画像として使う方法って無いのかな……？

今回はこのようなお悩みにお答えします。

ケケンタ

ケケンタのITブログでは、Webアプリ（PHP・Laravel）やWeb制作（WordPress・コーディング）について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください！

運動不足、気になっていませんか？

もしプログラミング学習やお仕事で運動不足が気になっているなら
連続屈伸運動がおすすめです！

ボタンにカーソルを合わせるだけで
カウントダウンが始まるタイマーをご用意してみました！

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい！

タイマースタート

3:00

1分 3分 5分 10分

※運動不足だと連続３分で取り組んでもかなり息が切れます。
（僕は加えて気分もちょっと悪くなりました……）
絶対にご無理の無い範囲でお取り組みください！

Font Awesomeとは？

そもそもFont Awesomeとは？について解説をします。

使い方はいたってシンプルです。

Font Awesomeの基本的な使用方法

STEP

headタグにCDN読み込み用のコードを記述

以下のコードをheadタグに記述します。

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet">

最新バージョンはこちらからご確認いただけます。
https://cdnjs.com/libraries/font-awesome

STEP

公式サイトでアイコンを検索する

Font Awesomeの公式サイトでアイコンを検索します。

STEP

表示されているHTMLを任意の箇所に記述する

アイコンをクリックすると表示されるHTMLコードを任意の箇所に記述します。

実際の使用例

See the Pen fontawesome（背景画像） by ケケンタ (@lgshifbg-the-looper) on CodePen.

ケケンタ

このように使用することで、簡単にWebサイトに好きなアイコンを挿入することができ、Font Awesomeは非常に便利です。

Font Awesomeを背景画像として使用する方法

それでは本題の「Font Awesomeを背景画像として使用する方法」についてですが、こちらは基本的な使用方法とは少しやり方が変わってきます。

Font Awesomeを背景画像として使用する方法

STEP

Font Awesomeのアイコンを設定するための疑似要素（beforeやafter）を用意する

STEP

疑似要素に以下の３行の記述を入れる

.sample::before{
  content:"\文字コード";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

ハイライト箇所１行目の「文字コード」はFont Awesome公式サイトの以下の部分で確認ができます。

実際の使用例

See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.

ケケンタ

このように使用することでFont Awesomeを背景画像として設定することが可能です。

まとめ

以上が、Font Awesomeを背景画像として設定する方法でした。

Font AwesomeはそのままHTMLに記述することも可能ですが、疑似要素を用意することで背景画像として利用することも可能です。

そうするメリットとしては

• HTMLの構造を変えずに済む
• SEO的にHTMLとして認識させる必要がないアイコンを設定できる

といったことが挙げられます。

ケケンタ

それでは、最後までご覧いただきありがとうございました！