<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha384-*" crossorigin="anonymous">上記のコードでは、FontAwesomeのCSSファイルをCDN経由で読み込んでいます。"href"属性の値は、FontAwesomeのバージョンに応じて変更する必要があります。
FontAwesomeを正しく読み込んだら、アイコンをウェブページに追加する準備が整います。以下の例を参考に、アイコンを表示する方法を学びましょう。
<i class="fas fa-heart"></i>上記のコードでは、タグのclass属性に"fas fa-heart"という値を指定しています。"fas"はFontAwesomeのアイコンタイプを指定し、"fa-heart"は具体的なアイコンの名前です。この例では、ハートのアイコンが表示されます。
他のアイコンを表示するには、FontAwesomeの公式ウェブサイトで提供されているアイコン一覧を参照して、適切なクラス名を使用します。例えば、以下のコードは、雲のアイコンを表示します。
<i class="fas fa-cloud"></i>また、アイコンの色やサイズを変更することもできます。以下の例では、アイコンの色を赤色に変更しています。
<i class="fas fa-heart" style="color: red;"></i>さらに、アイコンに対してCSSスタイルを適用することもできます。例えば、以下のコードでは、アイコンに影のエフェクトを追加しています。
<i class="fas fa-heart" style="text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);"></i>以上が、FontAwesomeを使用してウェブサイトにアイコンを追加する方法の基本的な解説です。さらに詳細な使い方やアイコンのカスタマイズについては、FontAwesomeの公式ドキュメントを参照してください。