【THE THOR向け】初心者でも簡単!Font Awesomeを導入する方法

 
Ai
無料アイコンが使い放題!Font Awesomeを THE THOR(ザ・トール)に導入する方法を紹介するよ!
こんな人にオススメ
  • THE THORでオシャレなアイコンを使いたい
  • 記事内でTwitterやチェックマークなどのアイコンを使いたい
  • 設定ミスが無い、正しい導入方法が知りたい
初心者も簡単!

みなさんこんにちは。

JonyとAi(@10to1_travel)です。

ブログ内でアイコンを使いたい時ってありますよね。例えばカスタマイズでアイコンを使ったり、記事のチェックポイントなどで活用できます。

 
Jony
チェックマークとか、Twitterのアイコンとかあったら記事が読みやすくなるもんな!

Font Awesomeは無料だけでも 1,600以上のアイコンが文字と同じように使うことができます。

今回は THE THOR(ザ・トール)に Font Awesomeを簡単に導入する方法を図解で紹介していきます。

※ちなみに THE THORじゃなくてもやり方は他のテーマでも同じなので、WordPressであればこのやり方で可能です。

Font Awesomeとは?

Font Awesomeとは?

Font Awesome(フォント オウサム)とは、ウェブサイトやブログで Webアイコンフォントを表示できるようにしてくれるサービスです。

画像ではないので、サイズを変更しても劣化(ボケる)こともありませんし、色やサイズ、角度やアニメーションなど細かい設定まで自由に変更することができます。

使用例

例えば、以下のアイコンは Font Awesomeを使って表示してます。色やサイズも自由です。

車だよ Twitterのロゴも色を変えるとより見やすい! 大きくなっちゃった! 動かすこともできるよ!
 
Ai
わー動いてるー!こんなこともできるんだ!無料だけでも多そうだけど有料とどう違うんだろう?

FontAwesome 無料版と有料版の違い

FontAwesome 無料版と有料版の違い

無料版も有料版も、商用利用可能ですが、使用できるアイコンが限定されています。

無料版
有料版
  • 1,608個のアイコン
  • 1つのスタイル(太さ)
  • 1アカウント登録可
  • 1キットのみ
  • 1万ページビュー/月
  • Font Awesome 6非対応
  • 7,864個のアイコン
  • 4つのスタイル(太さ)とブランド
  • 5アカウント+追加登録あり(+$20)
  • 20のホスト型プロキット
  • 100万ページビュー/月
  • Font Awesome 6対応
  • 250個のアップロードされたアイコン
  • 自動サブセット化
  • ヒューマンテックサポート
  • プロアセットのダウンロード
  • 標準プロライセンス
  • Pronpmレジストリ

注目すべきは、アイコン数が約 5倍、アイコンスタイルが全て選べる、Font Awesome 6に対応してる部分ですね。

ただ、無料版でもほとんどの機能・アイコンが使えるのでブログなら無料版で十分です。

FontAwesome 6が2021年リリース!

2021年に Font Awesome 6がリリースされました。それにより 4,845個のアイコン(有料版込み)→ 7,864個にアップグレード、さらにスタイルに新しく Thin(極細)が追加されました。

 
Ai
有料版PROを使いたい場合は年間 99ドルで利用できます。日本円だと約 1万円かな。1年契約だから月 840円くらいで利用できるから安いね!

THE THORにFont Awesomeを導入する方法

Font Awesomeを理解したところで、THE THOR(ザ・トール)に導入する方法を解説していきます。

Font Awesomeの導入の方法は 4つあります。

  • CDN
  • Kit Code(ver.5.9以降で推奨)
  • ファイルダウンロード
  • プラグイン

私たちは Kit Codeを使う方法をオススメしてます。なぜなら Kit Codeで一度設定しておくと、アイコンがアップデートされても使えますし、サイト速度の低下の心配もありません。

さらに、設定と言ってもアカウント登録してコードを貼り付けるだけなので初心者の方でも簡単です。

CDNを使ってアイコンを使用する従来の方法も継続されてますが、バージョン 5.9以降のアイコンを使うことができないのと、公式ページで「廃止予定」と発表されてるので、今はオススメしてません。

詳しくは以下で解説してます。

>>【コピペだけ!】Font Awesome5のアイコンをCDNで表示する手順
>>Font Awesomeの CDNは廃止が決定:解決策は2つ

ファイルダウンロードはバージョンアップデート毎に設定し直す必要があるのと、phpファイルを編集するので初心者向けではありません。

プラグインを使う方法は一番簡単なので初心者向けですが、プラグインの導入をするのでサイト速度の低下が懸念されます。

と、言うことで今回は一番コスパが高い Kit Codeを使って Font Awesomeを導入する方法をお伝えします。

関連記事

 Ai 今日は Font Awesomeを最速で利用可にする、CDNの使い方手順を解説するよー!って言ってもコピペだけだよー! こんな人にオススメ Font Awesomeのアイコンを使いたい人初心者なのでなるべ[…]

関連記事

みなさんこんにちは。 Webアイコンフォントでとても有名でオシャレなサービスに Font Awesomeがあります。CSSを HTMLにはめ込むだけで使用できるのでとても簡単です。 CSSを読み込むのに C[…]

手順1. アカウント登録する

手順1では Font Awesomeのアカウント登録をします。

→Font Awesome公式サイト

Font Awesomeのアカウント登録する

画面上の「Start」をクリックします。

Font Awesomeのアカウント登録する

あなたのメールアドレスを入力し、「Send Kit Code </>」をクリックします。

以下の画面になると送信完了です。

※もし 1分待ってもメールが届かない場合は、上記の「Resend Confirmation Email」をクリックしてください。

Font Awesomeのアカウント登録する

正常に送信されてると、以下のようなメールが届きます。

Click to Confirm Your Email Address + Set Things Up」ボタンをクリックすると、以下のようなパスワード設定画面に映ります。

Font Awesomeのアカウント登録する

New Passwordと、再確認用の Confirm New Passwordと同じパスワードを 2回入力します。

入力したら「Set Password & Continue」をクリック。

その次にアカウント情報を入力するページに移ります。

Font Awesomeのアカウント登録する

必要事項を入力して「All set. Let’s go !」をクリック。

・What’s your first name ?(あなたの名前は?)
・How about your last name ?(あなたの苗字は?)
・You first used Font Awesome in …(あなたが初めて Font Awesomeを使ったのは?)
・Got a favorite Font Awesome icon ?(お気に入りのアイコンは何ですか?)

今アカウント設定が面倒くさくて、後で入力したい場合は「No thanks. Let’s skip this step for now.」をクリックしてください。

以下の画面に移ると、アカウント登録が完了したと言うことです。

Font Awesomeのアカウント登録する

画面上にあるコードがあなた専用の Kit Codeです。

それをコピーして、コードの取得は完了です。

 
Jony
あとは THE THORの<head>内にコードを貼り付けたら完了や!

手順2. THE THORの<head>内に貼り付ける

手順2は簡単です。THE THORの <head>内にコードを貼り付けます。

外観 → カスタマイズ → 基本設定[THE] → 高度な設定

と進み、</head>直上の自由入力エリアにコピーしたコードを貼り付けます。

これで THE THORに Font Awesomeを導入できました。

お疲れ様です!

※メイン画面からKit Codeを確認する方法

本来の、Font Awesomeのメイン画面から Kit Codeを確認する方法です。

上記の画面を閉じてしまい、再度 Kit Codeを確認したい時に読んでください。

まずトップ画面から、右上の「Sign In」をクリックしてアカウントサインインします。

※メイン画面からKit Codeを確認する方法

登録したメールアドレスとパスワードを入力して「Sign In」をクリックします。

すると以下のようなアカウント登録ページに進みます。

少し下にスクロールすると「Font Awesome Kit」と言う項目があるので、右の「Manage Kit」をクリック。

画面に表示されてる「Your Kit」をクリックします。

これで先ほどの画面に到着です。ここでコードを取得できます。

 
Ai
せっかく導入できたから、ついでに無料アイコンの探し方も覚えておこう!

Font Awesomeのアイコンを探してみよう!

Font Awesomeのアイコンを探してみよう!

Font Awesomeでアイコンの探し方をお伝えします。

まず Font Awesomeのトップページを開き、上の「 Icons」をクリックするとアイコン一覧画面に映ります。

無料アイコンを探したい場合

無料アイコンを探したい場合

無料アイコンを探したい場合は左の「Free」をクリック。

ここに表示されてるアイコンは全て無料で使用することができます。

特定のアイコンを探したい場合

特定のアイコンを探したい場合

あなたが特定のアイコンを探したい場合は Searchボックスを使います。

ちなみに色がくっきりしてるのが無料アイコン、薄く透けてるアイコンが有料PROアイコンです。

※検索する時は全て英語で入力します。日本語を入力してもエラーが発生します。

検索は全て英語で入力してください。例えば、上記のように「車」なら「car」と検索します。

もし英語が分からない場合は Google翻訳などで英語を調べて入力しましょう。(私たちがよくやってる方法です)

探し方はこれだけです。とても簡単でしたね。

次は、そこからアイコンを使ってみましょう!

Font Awesomeのアイコンを使ってみよう!

Font Awesomeのアイコンを使う方法です。

HTMLで使う場合と、CSSに書き込む方法があり、それによって使うコードが違います。

HTMLで使う場合

HTMLで使う場合は画面右の HTMLコードをコピーします。

このHTMLコードをアイコンを表示させたい場所に貼り付ければ完了です。(コードはテキストモードに貼り付ける必要があります)

CSSで使う場合

CSSで使う場合

カスタマイズで使う CSSコードに貼り付ける場合は、左の CSSコードをコピーします。

コピーしたコードを表示させたい要素に貼り付けます。

Font Awesomeを CSSで使う方法は以下の記事で詳しく解説してるので、ご覧ください。

記事 Coming Soon

THE THORにFont Awesomeを導入する方法:まとめ

今回は THE THOR(ザ・トール)に Font Awesomeを導入する方法を紹介しました。とても簡単にできましたね。

ブログデザインをさらに向上させるオシャレなアイコンを、ぜひ使って見てください!

次の記事では Font Awesomeのアイコンを CSSカスタマイズで使う方法を解説していきます。

記事(Coming Soon)ちょっと待っててね!

さらに、記事内で HTMLとして Font Awesomeのアイコンを使う方法も詳しく解説してますので、そちらもご覧ください。

記事(Coming Soon)ちょっと待っててね!

最後まで読んでいただきありがとうございます。

 
Ai
他にも Webアイコンフォントやカスタマイズで面白いの見つけたら、どんどん更新していきますね!