超有名Webアイコンフォント、Font Awesome。
聞いたことがあるけど、使い方がいまいち分からない。
そんな方は、ぜひこの記事を読んでマスターしちゃいましょう!
Font Awesomeとは
「Font Awesome(フォントオーサム)」とは、ウェブサイトでアイコンを表示させることができる、Webアイコンフォントのことです。
画像をウェブページに貼るのとは違うので、拡大してもぼやけませんし、色やサイズが簡単に変更できます。
Font Awesomeの使い方
Font Awesomeを使うにあたって、まずは準備をしましょう。
方法その1. キットのコードを読み込む
Font Awesomeが推奨しているやり方です。
公式ホームページでアカウントを作成し、キットコードを取得します。
アカウント作成は、メールアドレスとパスワードと名前を入力するだけですので簡単です。
詳しく知りたい方はこちらから>>アカウント作成について
取得したコード(<script>タグ)を<head>タグ内に貼り付けるだけで使えるようになります。
この時、バージョン違いや別の読み込み方のFont Awesomeと重複しないようにしましょう。
方法その2.CDNで読み込む
Font Awesomeを外部サーバーから読み込むCDN。
自分のサーバーにアップロードしないので負荷が少ないですし、なんといっても簡単です。
しかし、公式ではCDNの廃止が宣言されました……。
どうしてもCDNがいい!という方は、cdnjsから取得しましょう。
![](https://spicaweblog.com/wp-content/uploads/2022/04/b8662acd7f4e2760199232dc04839125-1024x475.png)
コピーしたコードを<head>タグ内に貼り付けるだけで使えるようになります。
方法その3. WordPressのプラグインを使う
![](https://spicaweblog.com/wp-content/uploads/2022/04/fontawesome.png)
インストールするだけで簡単に使えますが、プラグインを入れすぎるとサイトが重くなってしまいます。
そのため、基本的にはおすすめしていません。
また、WordPressのテーマには、FontAwesome対応のものもありますので、その場合にはプラグインのインストールは必要ありません。
最新のバージョンは非対応のことが多いので、使いたいアイコンが対応しているのか確認してみましょう。
方法その4. ファイルをダウンロード
公式ホームページからファイルをダウンロードし、そのファイルを自分のサーバーにアップロードする方法ですが、サーバーに負荷をかけるだけですのでおすすめしません。
方法その5. アイコンをダウンロード
使いたいアイコンが少ない場合、公式ホームページからダウンロードする方法もあります。
この場合は、アップロードするフォルダ(imageフォルダなど)に格納します。
それなりにサーバーに負荷がかかるため、アイコンの数が多い場合はキットかCDNを使うほうがいいでしょう。
Font Awesomeでアカウントを作成する
Font Awesomeの公式ホームページから、アカウントを作成してみよう。
WordPressのテーマにもよりますが、あらかじめFont Awesomeが使えるようになっていることがあります。
その場合、アカウントの作成は必要ありませんので、ここの項目を飛ばして次に進んでください。
![](https://spicaweblog.com/wp-content/uploads/2022/04/fa-entry1-1024x472.png)
「Your Kits」をクリック。
![](https://spicaweblog.com/wp-content/uploads/2022/04/fa-entry2-1024x458.png)
「Start for Free」をクリック。
![](https://spicaweblog.com/wp-content/uploads/2022/04/fa-entry3-1024x458.png)
メールアドレスを入力し、「Send Kit Code」をクリック。
入力したメールアドレス宛にFont Awesomeからメールが届くので、さっそく確認してみましょう。
![](https://spicaweblog.com/wp-content/uploads/2022/04/fa-entry4.png)
届いたメールの「Click to ~」をクリック。
![](https://spicaweblog.com/wp-content/uploads/2022/04/fa-entry5.png)
パスワードを入力。確認用に再度パスワードを入力し、「Set Password & Continue」をクリック。
![](https://spicaweblog.com/wp-content/uploads/2022/04/fa-entry6.png)
「名前」「姓」を入力し、「All set. Let’s go!」をクリック。
「You first used Font Awesome in…」と「Got a favorite Font Awesome icon?」は記入してもしなくても大丈夫です。
![](https://spicaweblog.com/wp-content/uploads/2022/04/fa-entry7-1024x459.png)
あなたのページに飛びます。
キットコードを使うには、「Add Your Kit’s Code to a Project」の「Copy Kit Code!」をクリック。
HTMLの<head>内にペーストします。
アイコンを探す
FontAwesome公式ページから、お好きなアイコンを選んでください。
![](https://spicaweblog.com/wp-content/uploads/2022/04/d845b79c68a81bcdfcf0d4b43dc9cb82-1024x469.png)
検索は英語です。虫メガネか「Icons」から検索しましょう。
使いたいアイコンが見つかったらクリック。
![](https://spicaweblog.com/wp-content/uploads/2022/04/d0c40e6fdbe60609aefccd7bdb5990f3-1024x469.png)
コードが表示されていますので、そのエリアをクリックしてコピー。
![](https://spicaweblog.com/wp-content/uploads/2022/04/08367ef67929dc0db3e6ee63357e78b1-1024x469.png)
HTMLファイルの任意の場所に、さきほどコピーしたコードをペーストします。
コメント