HTMLでアイコンを変更する方法

Font Awesomeを使用する方法: Font Awesomeは、豊富なアイコンセットを提供する人気のあるライブラリです。以下の手順でアイコンを変更することができます。

1.1. Font AwesomeのCDNをHTMLファイルのセクション内に追加します。例えば、以下のコードを使用します:
```
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha384-pzjw9f+uaLKb0oq+uU9z0f8Y0g2yZxV+doN5AqEZcDp84sGxjX0xj2A5QXw5rLJ7" crossorigin="anonymous">
```
```
<i class="fas fa-heart"></i>
```
上記の例では、"fas fa-heart"クラスを使用してハートのアイコンを表示しています。
SVGアイコンを使用する方法: Scalable Vector Graphics（SVG）は、拡大縮小しても品質が劣化しないベクターベースのイメージ形式です。以下の手順でSVGアイコンを使用することができます。

2.1. SVGファイルを用意します。無料のアイコンセットをオンラインで見つけることもできます。
```
<img src="icon.svg" alt="アイコン">
```
上記の例では、"icon.svg"というファイル名のSVGアイコンを表示しています。
CSSでアイコンを作成する方法: CSSを使用してカスタムアイコンを作成することもできます。以下の手順を参考にしてください。

3.1. HTMLファイル内のセクションでCSSファイルをリンクします。例えば:
```
<link rel="stylesheet" href="styles.css">
```
3.2. CSSファイル内で、contentプロパティを使用してアイコンを作成します。例えば:
```
.custom-icon::before {
 content: "\f004";
 font-family: "Font Awesome 5 Free";
}
```
上記の例では、"custom-icon"クラスを持つ要素の前にFont Awesomeのアイコンを表示しています。

これらの方法を使用して、HTMLでアイコンを変更することができます。必要に応じて、他のアイコンライブラリやカスタムアイコンの作成方法も調査してみてください。