CSS アイコン

Volardev 編集部 April 12, 2026

Webページにアイコンを簡単に追加するには、Font Awesome などのアイコンライブラリを使用するのが最も効率的です。

1. アイコンの追加方法 (How To Add Icons)

アイコンをHTMLページに追加する最も簡単な方法は、アイコンライブラリを使用することです。

指定したアイコンライブラリの <i> 要素や <span> 要素に、クラス名（class name）を追加するだけで利用できます。

アイコンライブラリに含まれるすべてのアイコンは「スケーラブル・ベクター（Scalable Vectors）」であるため、CSSを使用してサイズ、色、影などをカスタマイズできます。

2. Font Awesome アイコン (Font Awesome Icons)

Font Awesome を使用するには、fontawesome.com にアクセスしてサインアップし、コード（Kit Code）を取得します。このコードを HTML ページの <head> セクションに追加します。

<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>

2.1 Font Awesome の実装例

<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>

<i class="fas fa-cloud"></i>
<i class="fas fa-favorite"></i>
<i class="fas fa-thumbs-up"></i>
<i class="fab fa-font-awesome"></i>

</body>
</html>

3. Bootstrap アイコン (Bootstrap Icons)

Bootstrap Icons を使用するには、HTML ページの <head> セクションに以下の link タグを追加します（ダウンロードは不要です）。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

3.1 Bootstrap アイコンの実装例

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>

</body>
</html>

^{4. Google アイコン (Google Icons)}

Google アイコンを使用するには、HTML ページの <head> セクションに以下の linkタグを追加します。

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

Google アイコンを使用する場合も、ダウンロードは不要です。

4.1 Google アイコンの実装例

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

<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>

</body>
</html>

5. CSS によるアイコンのスタイリング (Styling Icons with CSS)

これらのアイコンはベクター形式であるため、テキスト（フォント）と同じように CSS プロパティでスタイリングが可能です。

5.1 スタイリングの適用例

/* アイコンの色とサイズをカスタマイズ */
.material-icons {
  font-size: 48px;
  color: dodgerblue;
  text-shadow: 2px 2px 4px #000000;
}

アイコンライブラリを活用することで、画像アセットを個別に作成することなく、軽量でメンテナンス性の高い UI コンポーネントを構築することができます。プロジェクトの要件に合わせて、最適なライブラリを選択しましょう。