まず、HTMLファイルの
セクション内で、Font AwesomeのCDNリンクを追加します。<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
上記のコードは、Font Awesomeの最新バージョンをCDN経由で読み込むためのリンクです。必要に応じてバージョン番号を変更してください。
次に、任意の場所でアイコンを表示するために、要素を使用します。例えば、以下のコードはハートのアイコンを表示します。
<i class="fas fa-heart"></i>
上記のコードでは、fas
はフォントスタイル(Solidアイコン)、fa-heart
は使用するアイコンのクラス名です。他のアイコンを使用する場合は、Font Awesomeの公式ドキュメントを参照して適切なクラス名を見つけることができます。
以上がFont Awesome CDNの使用方法と基本的なコード例です。必要に応じて、アイコンのサイズや色を変更するための他のクラスやスタイルを追加することもできます。
この記事では、Font Awesome CDNを使用してアイコンをウェブサイトに追加する方法を詳しく解説しました。これにより、ウェブ開発者はシンプルで簡単なコードを使用して魅力的なアイコンを実装することができます。