綺麗な絵文字をWEBサイトで表示したい？
それなら Font Awesome を使おう！
ということで、本記事では WEBサイトで Font Awesome を利用する方法を紹介します。
主に 3つの方法があるので環境にあった方法を選択してください。
目次
Font Awesome を使う方法その1「CDNを利用する」
R.U.I（ルイ）RUIsCODEはこの方法をおすすめします！
CDNを使用する方法:最も簡単な方法で、以下のコードをHTMLファイルの<head>タグ内に追加します。
<link href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" rel="stylesheet">Font Awesome を使う方法その3「ファイルをサーバーにアップロードする」
3つ目の方法は、ファイルをサーバーにアップロードする方法。
Font Awesome のファイルをダウンロードし、自身の（または管理できる）サーバーにアップロードします。
その後、以下のように読み込みます。
<link rel="stylesheet" href="css/all.min.css">- ファイルへのアドレスは適宜変更してね。
Font Awesome アイコンの使用方法
アイコンをWEBサイトへ表示するには、Font Awesome のウェブサイトなどから目的のアイコンのHTMLコードをコピーし、ページ内の表示したい位置に貼り付けると使えます。
設置するコードの例
<i class="fa-solid fa-ice-cream"></i>Font Awesome アイコンの探し方
アイコン探しは Webllica さんなどで検索するのがわかりやすくておすすめです。
Webllica
【Ver.4, Ver.5対応】Font Awesome アイコンを日本語で検索！クリック１つでコードをコピー【アイコン一覧…
FontAwesomeのアイコンを日本語で検索！最新のバージョン５と旧バージョンのアイコンにも対応しています。それぞれバージョンごとに検索出来るようにアップデートしました…
サイト内の検索窓に検索したい名前を日本語で入力すれば、該当するものが出てきます。（雪 とか）
広告は多いですが、アイコン検索についてはとてもわかりやすいので迷わないかと。
Webllicaさんでは「クラス」をクリックすればタグのコピーもできます。
アイコンはカスタマイズできる
アイコンはサイズや色、動きもカスタマイズできます。
必要に応じて試してみてね。
Font Awesome アイコンのカスタマイズ方法
- サイズ変更: クラスに「fa-2x」（2倍）、「fa-3x」（3倍）などを追加
- 色の変更: style属性で指定（例:
style="color:pink;"） - アニメーション: 「fa-beat」、「fa-spin」などのクラスを追加
まとめ
これらの方法を使用することで、Font Awesome のアイコンを簡単にWEBサイトに組み込むことができます。
読み込みで少しサイトが重くなる可能性はありますが、導入することでリッチなページが作れます。
試してみてね！
あわせて読みたい
【コピペで簡単】CSSで雪を降らせる方法
冬場のLPではどうやって冬っぽくしよう？どうやってクリスマスっぽくしよう？と悩みますよね。そんなときにオススメなのが『雪を降らせる』です。一気に冬っぽい印象を与えることができます。CSSのコピペで簡単に実装する方法を紹介します。