ケケンタ

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

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

あわせて読みたい

PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】 僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション…

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として認識させる必要がないアイコンを設定できる

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

ケケンタ

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

もっと効率的にWeb制作を学びたい方へ

Web制作の学習は楽しいものですが、一人で進めていると「これで合っているのかな？」と不安になることもありますよね。

僕も独学でWeb制作を学んできましたが、今思うと「もっと早く知りたかった」と思うことがたくさんあります。

特に以下のような方は、一度プログラミングスクールの利用を検討してみることをおすすめします。

• 学習の方向性に迷いがある方
• 効率的にスキルを身につけたい方
• 転職や副業でWeb制作を活用したい方
• 挫折経験がある方

忍者CODEなら、業界最安値で24時間サポート付きの学習環境が整っています。

ご興味のある方は、こちらの記事で詳しくご紹介しています。

あわせて読みたい

忍者CODEでWeb制作を学ぶべき理由【業界最安値で挫折しない学習環境】 Web制作を学びたいけど、プログラミングスクールは高すぎるし、独学だと挫折しそうで不安…… このような悩みをお持ちの方に向けて、この記事では 業界最安値でWeb制作を...