CSS アイコン

アイコンの追加方法

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

指定されたアイコンクラスの名前を、いかなるインラインHTML要素（例：<i>または<span>）に追加します。

以下のアイコンライブラリにはすべて拡張可能なベクターアイコンがあり、CSSを使用してカスタマイズできます（サイズ、色、影など）。

Font Awesome アイコン

Font Awesomeアイコンを使用するには、fontawesome.comにアクセスし、ログインしてコードを取得し、HTMLページの <head> 部分に追加してください：

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

Font Awesome 5のチュートリアルで、Font Awesomeの使用方法についてさらに詳しく学んでください。

ヒント：ダウンロードやインストールは不要です！

例

<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
</body>
</html>

結果：

自分で試してみる

Bootstrap アイコン

Bootstrap glyphiconsを使用するには、HTML ページの <head> 部分にこの行を追加してください：

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

ヒント：ダウンロードやインストールは不要です！

例

<!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>

結果：

自分で試してみる

Google アイコン

Google アイコンを使用するには、HTML ページの <head> 部分に以下の行を追加してください：

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

ヒント：ダウンロードやインストールは不要です！

例

<!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>

結果：

自分で試してみる