More than 1 year has passed since last update.

CDNでFont Awesome 6をで利用する

Last updated at 2022-12-14Posted at 2022-10-13

はじめに

HTML/CSSでアイコンを使用したかったのでFont Awesomeを初めて使用しました。
バージョン違いで戸惑ったので、CDNでFont Awesome 6を利用する方法を備忘録として残しておきます。

以下のコードをHTMLファイルの<head></head>内に記載する。(Ver.6.2.0)

<link href="https://use.fontawesome.com/releases/v6.2.0/css/all.css" rel="stylesheet">

Font Awesomeの現在のバージョンは、公式サイト内(下記画像参照)で確認できる。

公式サイトから使いたいアイコンのコードをコピーする。
https://fontawesome.com/

コピーしたコードはHTMLファイルに貼り付ける。

index.html

<body>
  <i class="fa-solid fa-house"></i>      
</body>

バージョンが異なるとアイコンが表示されないことがある。
防ぐにはCDNのv6.2.0の部分と同じバージョンのアイコンを検索する必要がある。