HTMLページにアイコンを追加する方法

Font Awesomeを使用する方法:
- Font Awesomeは、数百種類のアイコンを提供するフリーのアイコンフォントです。
- Font Awesomeの公式ウェブサイトから、アイコンのCDNリンクを取得してHTMLファイル内に追加します。
- 以下の例では、<i>要素を使用してアイコンを表示します。
```
<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
 <i class="fas fa-heart"></i>
</body>
</html>
```
SVGアイコンを使用する方法:
- SVG（Scalable Vector Graphics）は、XMLベースのベクトルイメージ形式です。
- SVGアイコンをウェブページに追加するには、以下の手順を実行します。
  - SVGアイコンをオンラインで検索し、ダウンロードします。
  - HTMLファイル内に<svg>タグを追加し、<path>要素でアイコンのパスを指定します。
```
<!DOCTYPE html>
<html>
<body>
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
   <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-3 8h6v2H9v-2z"/>
 </svg>
</body>
</html>
```
ローカルに保存された画像を使用する方法:
- ローカルに保存されたアイコン画像を使用するには、以下の手順を実行します。
  - アイコン画像をプロジェクトフォルダ内に保存します。
  - HTMLファイル内で、<img>要素を使用して画像を表示します。
```
<!DOCTYPE html>
<html>
<body>
 <img src="icon.png" alt="アイコン">
</body>
</html>
```

上記の方法を試してみて、HTMLページにアイコンを追加してみてください。