【2020年最新版】Font Awesome をつかってみる　うまく表示されない原因も解説 : The WONDER ROAD

ブログ書いていると

「すこしでもきれいに見せたい」

という欲もでてくるので

コピペできるデザインを紹介しているサイトを

利用させてもらうこともあります。

そういったサイトで

「アイコンを表示させたいときは

"Font Awesome"を導入して・・・」

といった表示もあり

前々から気にはなっていました。

やはりアイコンなしでは

デザインにも限りがあるので

思い切って導入しました。

Font Awesomeってなに？
Font Awesomeの導入方法
うまく表示されない原因はこれ！

1.Font Awesomeってなに？

Font AwesomeはCSSで

1500以上のアイコンを

無料で利用できる

ツールキットです。

使い方もかんたんで

コードをコピーしてきて

自分のページに貼りつけるだけです。

これだけで

かんたんにページが

格段にキレイにみえます。

有料版もあり

そちらではさらに多くのアイコンを

利用することもできます。

2.Font Awesomeの導入方法

それでは Font Awesome の導入方法です。

いろいろなサイトで導入方法が解説されていますが

少し変わっているようです。

以前は無料版であれば特別な手続きは不要で

利用できていたようですが

最近は無料で利用はできますが

メールアドレスを使用して

アカウントの作成が必要になっています。

Font Awesome のページには

下記のような説明があります。

Why do you need my email address?

We create kits for each website so you can quickly upgrade and change your settings all without ever pushing code. To do this, we need to create a Font Awesome account so we know which kits are yours and so you can come back and manage them.

なぜメールアドレスが必要？

コードを再送することなく簡単にアップグレードや設定変更できるようにそれぞれのウェブサイトごとにキットを構成しています。そのため、あなたがどのキットを使っているかを確認するためにアカウントの作成が必要で、アカウントがあることでいつでもキットを管理できるようになります。

ここではCDNで使う方法の説明です。

無料版と有料のPro版がありますが無料版でも十分なコンテンツですので無料版を申し込みます。
Font Awesome のホームページから「Start for Free」をクリックします。

表示された画面でe-mailアドレスを入力して「Send Kit Code」をクリックします。

次のような画面が表示されて入力したアドレスにメールが送られてきます。

送られてきたメールのなかの「Click to Confirm Your Email Adress ＋Set Things Up」をクリックする。

パスワードを決めて入力するといくつか質問されます。

質問には答えなくても次へすすめるので「All set. Let's go!」をクリックします。

これでアカウントに新しいキットが登録されています。
まず作成したアカウントにサインインして右上のアイコンをクリックします。

表示されたメニューから「Kits」をクリックします。

作成されたキットが表示されるのでクリックするとコードが表示されます。

これをコピーしてHTMLの<head> ~ </head> タグ内に貼りつけるだけです。