Font awesomeは、WEBアイコンフォントを提供していて、無料で簡単にアイコンを設置できるサービスです。

お問合せフォームボタンに封筒アイコン、

電話番号に受話器アイコン、

SNSアイコンなどなど。

テキストだけではスルーされてしまうところに、

アイコンなら視覚的にユーザーの視線を引き付けることができますね。

GoogleFontsもアイコンフォントを提供しています。

が、Font awesomeの方が設置しやすい点と、アイコンの種類も豊富です。

とはいえ、GoogleFonts・・・・なんかちょっとずつかわいい。

そんなにアイコンの種類いらないし、可愛いほうがいいって方はGoogleFontsをおススメします。

目次

1. Font awesomeを設置しよー！
   1. Kitを使う
   2. CDNを使う
   3. 自身でサーバアップ
2. CDNを設置しよ！
3. アイコンを見つけて設置しよう
4. アイコンのサイズを変えてみよ！
5. カスタマイズ方法を見てみよ

Font awesomeを設置しよー！

設置方法は、3種類あります。

1+　Kitを使う

メリット：バージョン管理、設定管理などがラクになる

デメリット：ログイン必須。無料利用の場合はアクセス数制限あり

2+　CDNを使う

メリット：設定がラク

デメリット：バージョン管理は自身で行う。

ただし、Font awesomeの有料版ではCDNが廃止となり、

もしかしたら無料版も廃止になるかも・・・・。

3+　自身でサーバアップ

デメリット：メンドー

っということで、2番のCDNを使う方法で設定していきます。

CDNを設置しよ！

Font Awesomeの現在の最新は「V6.2.1」です。バージョンは確認しておきましょうね。

以下のcssをheadタグに設置しましょう。

<link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">

これで完了です。

あとは、アイコンを見つけて、設置したい場所にコードをコピペしていきます。

アイコンを見つけて設置しよう

Font awesomeの「ICON」ページにアクセスして、アイコンを見つけましょう！

では、家のアイコンを探してみましょうか。

検索ボックスに「home」と入力して検索してください。

ちなみに、無料版を使う方は、検索結果画面の「Free」ボタンをクリックして、フィルタかけておきましょう。

いろんな種類のHOMEアイコンが出てきましたね。

「igloo」・・・かわいいですね。

クリックしてみましょう。以下のボックスが表示されますね。

「HTML」のコードをクリックしてコピーし、HTMLファイルに貼りつけていきましょう。

<link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">

<i class="fa-solid fa-igloo"></i>

アイコンがたくさんあるので探す、というか迷う手間はありますが、

ほぼ2ステップでアイコンフォントの設置が完了！

いいですね～！

アイコンのサイズを変えてみよ！

アイコンといえど画像ではなくフォント扱いなので、フォントと同じようにサイズを変更できますよ。

Font awesomeにサイズのスタイルが盛り込まれていますので、テキストサイズとは違うサイズを指定したいときに役立ちますよ。

見ていきましょう。

<link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">

<i class="fa-solid fa-igloo fa-2xs"></i>
<i class="fa-solid fa-igloo fa-xs"></i>
<i class="fa-solid fa-igloo fa-sm"></i>
<i class="fa-solid fa-igloo fa-lg"></i>
<i class="fa-solid fa-igloo fa-xl"></i>
<i class="fa-solid fa-igloo fa-2xl"></i>

<link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">

<i class="fa-solid fa-igloo fa-1x"></i>
<i class="fa-solid fa-igloo fa-3x"></i>
<i class="fa-solid fa-igloo fa-5x"></i>
<i class="fa-solid fa-igloo fa-7x"></i>
<i class="fa-solid fa-igloo fa-10x"></i>

サイズ一覧は以下の通りになります。

カスタマイズ方法を見てみよ

他にもリスト用スタイルやアニメーション、回転なんかもできるので、公式ページを見ながらいろいろ試してみてください。