CSS アイコン

アイコンは、アイコンライブラリを使用して簡単にHTMLページに追加することができます。

アイコンの追加方法
Font Awesome Icons
- 例
Bootstrap Icons
- 例
Google Icons
- 例

アイコンの追加方法

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

重要：以下のアイコンライブラリに含まれるすべてのアイコンは、CSSでカスタマイズ可能なスケーラブルベクターです（サイズ、色、影など）。

Font Awesome Icons

Font Awesomeアイコンを使用するには、fontawesome.comにアクセスし、HTMLページの<head>セクションに追加するためのコードを取得します：

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

Font Awesomeの使用方法については、Font Awesome 5のチュートリアルをご覧ください。

注意：ダウンロードやインストールは必要ありません！

例

<!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-heart"></i>
  <i class="fas fa-car"></i>
  <i class="fas fa-file"></i>
  <i class="fas fa-bars"></i>

</body>
</html>

Bootstrap Icons

Bootstrapのグリフアイコンを使用するには、次の行を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 Icons

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>