CSSでFont Awesomeアイコンを簡単表示！初心者でも迷わない解説

2024-04-18

CSSでFont Awesomeアイコンを使用する

ここでは、CSSを使用してFont Awesomeアイコンを表示する方法を、初心者でも分かりやすく解説します。

必要なもの

Font Awesomeライブラリ
HTMLファイル
CSSファイル

手順

HTMLファイルにFont Awesomeライブラリを読み込む

ダウンロードしたFont Awesomeライブラリ (fontawesome.cssなど) を、HTMLファイルの <head> タグ内に読み込みます。

<link rel="stylesheet" href="path/to/fontawesome.css">

アイコンを表示したい要素にFont Awesomeクラスを追加

アイコンを表示したい要素に、Font Awesomeで用意されているアイコンに対応するクラスを追加します。例えば、ソーシャルメディアのアイコンを表示したい場合は、以下のようになります。

<i class="fab fa-facebook"></i> <i class="fab fa-twitter"></i> ```

Font Awesomeアイコンのクラス名は、`fa-` を先頭に、表示したいアイコン名の後にハイフン (-) を繋げた形式になっています。アイコン名のリストは、Font Awesome公式サイトで確認できます。

4. **CSSでアイコンのスタイルを調整 (オプション)**

アイコンのサイズ、色、回転など、CSSを使用して自由に調整できます。例えば、以下のCSSでアイコンを青色にしたり、サイズを大きくしたりできます。

```css
i.fa-facebook {
  color: blue;
}

i.fa-twitter {
  font-size: 24px;
}

補足

Font Awesomeには、様々な種類のアイコンが用意されています。詳細は、Font Awesome公式サイトで確認できます。
アイコンのクラス名は、随時更新される可能性があります。最新の情報は、Font Awesome公式サイトで確認することをおすすめします。
CSSでのスタイル調整は、お好みで自由に行ってください。

Font Awesomeアイコンを表示するサンプルコード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Font Awesomeアイコン表示例</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
</head>
<body>
  <i class="fab fa-facebook"></i> <i class="fab fa-twitter"></i> <i class="fab fa-instagram"></i> </body>
</html>

CSS

i.fab fa-facebook {
  color: blue;
}

i.fab fa-twitter {
  color: skyblue;
}

i.fab fa-instagram {
  color: pink;
}

説明

上記のHTMLコードは、Font Awesomeライブラリを読み込み、3つのソーシャルメディアアイコンを表示します。
各アイコンには、Font Awesomeで定義されているクラス名が割り当てられています。
CSSコードは、それぞれのアイコンの色を個別に設定しています。

ポイント

上記はあくまでも一例です。アイコンの種類やスタイルは、自由にカスタマイズできます。
Font Awesome公式サイトには、様々なアイコンやスタイル設定に関する情報が掲載されていますので、ぜひ参考にしてみてください。

CSSでFont Awesomeアイコンを表示するその他の方法

疑似要素を使用する

CSSの疑似要素 :before や :after を使用して、アイコンを表示することができます。この方法の利点は、HTML構造を変更せずにアイコンを追加できることです。

<div class="icon-box">
  <span>テキスト</span>
</div>

.icon-box:before {
  content: '\f007'; /* ファアイコンのコード */
  font-family: FontAwesome;
  display: inline-block;
  margin-right: 10px;
}

SVGスプライトを使用する

Font Awesomeは、SVGスプライトファイルを提供しています。このファイルを読み込むことで、アイコンをより効率的に表示することができます。

<svg class="icon-svg">
  <use xlink:href="#facebook"></use>
</svg>

.icon-svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

Webフォントとして読み込む

Font Awesomeは、Webフォントとしても利用できます。この方法の利点は、アイコンを滑らかに表示できることです。

<span class="icon-font">facebook</span>

@font-face {
  font-family: 'FontAwesome';
  src: url('path/to/fontawesome.woff2') format('woff2'),
       url('path/to/fontawesome.woff') format('woff');
}

.icon-font {
  font-family: FontAwesome;
  font-size: 24px;
}

JavaScriptを使用して、動的にFont Awesomeアイコンを生成することもできます。

<div id="icon-container"></div>

const iconContainer = document.getElementById('icon-container');
const facebookIcon = document.createElement('i');
facebookIcon.classList.add('fab', 'fa-facebook');
iconContainer.appendChild(facebookIcon);

CSSでFont Awesomeアイコンを表示する方法には、様々な方法があります。それぞれの方法には、利点と欠点がありますので、状況に合わせて最適な方法を選択してください。

css font-awesome