(確認事項)このMASAa.netには【広告】【PR記事】が掲載されています。MASAa.netご利用の方はプライバシーポリシーをご確認下さい。
WordPress関連ブログ関連サービス

Font Awesome 5.9.0以降を使うためにアカウント登録を行う!

アイキャッチ画像 Font Awesome
この記事は約4分で読めます。

【広告】

※ 本ページには【広告】が含まれています

WordPressテーマ THE THOR

別ブログのZMASAa.blogは、WordPressテーマ THE THOR(ザ・トール)を使って構築しています。

ZMASAa.blog│ガジェット好きのmasaaが情報発信する2nd WordPressブログサイト
ガジェット好きのmasaaが情報発信する2nd WordPressブログサイト

そのZMASAa.blogでは、Webアイコンフォント Font Awesome 5を利用しています。

以前、WordPressテーマ THE THOR(ザ・トール)で、Webアイコンフォント Font Awesomeを使うためにエントリー記事「Webアイコンフォント Font Awesomeを使う!」をアップしました。

Webアイコンフォント Font Awesomeを使う!
WordPressテーマ THE THOR(ザ・トール)とCocoonで、Font Awesomeの利用についてまとめてみました。このWebアイコンフォントをメニューや項目の先頭に表示させてブログをより一層見やすくさせると良いでしょう!

そのWebアイコンフォント Font Awesomeのバージョン5.9.0 からアカウント登録を行う必要が発生しました。

そこで、Webアイコンフォント Font Awesomeのバージョン5.9.0 以降で使うため、Font Awesomeのアカウント登録の手順についてまとめてみました。

Webアイコンフォント Font Awesomeとは?

Webアイコンフォント Font Awesomeとは、無料または有料で使えるWebアイコンフォントのサービスです。

現在の最新バージョンは「Font Awesome 5」となっています。

(※2019年6月27日現在 Font Awesomeのバージョン5.9.0 となっています。)

「Font Awesome 5」では、1,500種類以上のWebアイコンフォントが用意されており無料で使用することができます。

また、有料の「Proプラン」が用意されており、5,000種類以上のWebアイコンフォントを使用することができます。

有料の「Proプラン」は年間60ドルで利用することが可能です。

取りあえず無料で使えるプランで十分でしょう。

Webアイコンフォント Font Awesomeアカウント登録

  1. 最初に、Webアイコンフォント Font Awesome 5のサイトへアクセスします。
    Font Awesome
    The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free
  2. トップページの[Start for Free]をクリックします。Font Awesome 5.9.0以降を使うためにアカウント登録を行う!ここで以前だとコードが記載されて、そのコードをheadタグ内に貼り付ければOKでした。
    Webアイコンフォント Font Awesomeのバージョン 5.9 からは、最初にメールアドレスを登録する必要があります。
  3. このページで自分のメールアドレスを入力します。Font Awesome 5.9.0以降を使うためにアカウント登録を行う!
  4. メールアドレス入力完了後、左側の[Send My Kit Code </>]をクリックします。Font Awesome 5.9.0以降を使うためにアカウント登録を行う!
  5. 入力したメールアドレスに案内メールが送信されます。Font Awesome 5.9.0以降を使うためにアカウント登録を行う!
  6. 届いたメールを開いて、メール内容の[Click to Confirm Your Email Address + Set Things Up]をクリックします。Font Awesome 5.9.0以降を使うためにアカウント登録を行う!
  7. 再びブラウザに移り、パスワードを登録します。
    上側に新しいパスワードを入力し、確認のため下側に同じパスワードを入力します。Font Awesome 5.9.0以降を使うためにアカウント登録を行う!
  8. パスワード入力完了後、[Set Password & Continue →]をクリックします。Font Awesome 5.9.0以降を使うためにアカウント登録を行う!
  9. 次に、自分の名字と名前を登録します。Font Awesome 5.9.0以降を使うためにアカウント登録を行う!
  10. 名字名前入力完了後、[All set. Let's go! →]をクリックします。Font Awesome 5.9.0以降を使うためにアカウント登録を行う!
  11. 以上で、Font Awesomeの登録が完了しました。Font Awesome 5.9.0以降を使うためにアカウント登録を行う!

自分専用の新しいScriptコードが表示されるので、この設定をheadタグ内に貼り付ければ、Webアイコンフォント Font Awesomeのバージョン5.9.0 を使用することができます。

また、従来の方法は新しいバージョンがリリースされると設定し直す必要がありましたが、新しい方法ではScriptコードを変更する必要がありません。

従来と同じ形式のCSSの設定を利用する

しかし、なぜか提供されたJavaScriptを自分のheadタグ内に設定しても一部のアイコンが表示してくれません。

原因が良く分からないので、従来と同じ形式のCSSの設定で利用したいと思います。

Font Awesomeにログインした状態で、Font Awesome CDNのサイトにアクセスします。

Font Awesome
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free

そうすると従来の<link>タグの設定が表示されるので、この設定をheadタグ内に貼り付ければ、Webアイコンフォント Font Awesomeのバージョン5.9.0を使用することができます。

Font Awesome 5.9.0以降を使うためにアカウント登録を行う!

自分はこちらの設定で行いました。

こちらの設定は、Webアイコンフォント Font Awesome 5がバージョンアップされる度に、新しいバージョンに合わせて変更し直す必要があります。

最後に

Webアイコンフォントを自分のブログに表示させる方法については、以前のエントリー記事の「Webアイコンフォントを表示する」でご確認下さい。

Webアイコンフォント Font Awesomeを使う!
WordPressテーマ THE THOR(ザ・トール)とCocoonで、Font Awesomeの利用についてまとめてみました。このWebアイコンフォントをメニューや項目の先頭に表示させてブログをより一層見やすくさせると良いでしょう!

このWebアイコンフォント Font Awesome 5.9.0 を使って、次回のエントリー記事で、ウイジェット カテゴリーで使われているアイコンを変更してみたいと思います。

MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

シェアする
※ 本ページ内には【広告】が含まれています

コメント

【広告】