HTMLアイコンの入れ方｜Font Awesome・テキスト横並びも解説

2025.01.22

HTMLでアイコンを使いたいとき、画像やライブラリを活用するだけでなく、テキストとのレイアウトも重要です。

特に、アイコンとテキストを横並びにする方法は、Webデザインの基本技術として役立ちます。

この記事では、初心者にもわかりやすく、具体的なコード例を交えながら解説します。

この記事でわかること

HTMLでアイコンを挿入する基本的な方法
アイコンとテキストを横並びに配置する具体的なCSSやFlexboxの使い方
Font AwesomeやGoogle Material Iconsを使った実践的なデザインの手法

HTMLでアイコンを入れる基本の方法

アイコンをHTMLで挿入する最も基本的な方法は、画像や外部ライブラリを利用することです。以下に代表的な手法を紹介します。

画像を使う方法

HTML

<img src="https://www.###.com/icon.png" alt="アイコン説明" width="20" height="20">

src：画像ファイルのパス（画像のURL）を指定します。
alt：代替テキストを指定して、アクセシビリティを向上させます。
サイズ調整：widthとheight属性で適切な大きさに設定します。

この方法は簡単ですが、拡大縮小に伴う画質の劣化や、デザインの統一感が課題となる場合があります。

外部ライブラリを使ったHTMLでのアイコン入れ方

外部ライブラリを活用すれば、多種多様なアイコンを簡単に挿入できます。代表的なライブラリとしてFont AwesomeやGoogle Material Iconsを紹介します。

Font Awesomeの使い方

STEP

ライブラリの読み込み

HTMLの<head>タグ内に以下を追加します。

HTML

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

STEP

アイコンの挿入

以下のコードを記述するだけで、アイコンを表示できます。

HTML

<i class="fas fa-camera"></i> カメラ

fasはSolidスタイルを指定。
fa-cameraはカメラアイコンを意味します。

Google Material Iconsの使い方

STEP

ライブラリの読み込み

以下を<head>タグ内に追加します。

HTML

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

STEP

アイコンの挿入

次のように記述します。

HTML

<span class="material-icons">home</span> ホーム

HTMLでアイコンとテキストを横並びにする方法

アイコンとテキストを横並びにするには、CSSを利用して適切にスタイリングします。

Flexboxを使う方法

Flexboxは、要素を柔軟に配置できるCSSのレイアウト機能です。以下は、アイコンとテキストを横並びにする例です。

HTML

<div style="display: flex; align-items: center;">
  <i class="fas fa-check" style="margin-right: 8px;"></i>
  <span>完了しました</span>
</div>

display: flex：Flexboxレイアウトを有効にします。
align-items: center：アイコンとテキストの垂直方向を中央揃えにします。
margin-right：アイコンとテキストの間に余白を設定します。

CSSクラスを使う方法

スタイルを再利用して装飾する場合、CSSクラスを定義して使うと便利です。cssを直接書き込まず、スタイルを分けて書くことで見やすくなります。

例）クラス名を.icon-textとする場合

HTML

<style>
  .icon-text {
    display: flex;
    align-items: center;
  }
  .icon-text i {
    margin-right: 8px;
  }
</style>

<div class="icon-text">
  <i class="fas fa-user"></i>
  <span>ユーザー情報</span>
</div>

HTMLアイコン入れ方を使った実践例

ここでは、画像、Font Awesome、Google Material Iconsを利用し、テキストと横並びにした実用例を示します。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTMLアイコンの入れ方</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <style>
    .icon-text {
      display: flex;
      align-items: center;
    }
    .icon-text i, .icon-text img, .icon-text .material-icons {
      margin-right: 8px;
    }
  </style>
</head>
<body>
  <h1>HTMLでアイコンを入れる方法</h1>

  <div class="icon-text">
    <img src="icon.png" alt="アイコン画像" width="24" height="24">
    <span>画像アイコンを使用</span>
  </div>

  <div class="icon-text">
    <i class="fas fa-star"></i>
    <span>Font Awesomeアイコンを使用</span>
  </div>

  <div class="icon-text">
    <span class="material-icons">favorite</span>
    <span>Google Material Iconsを使用</span>
  </div>
</body>
</html>