スポンサーリンク

アイコンフォント FontAwesomeのコード取得方法

2019年10月27日ブログ

  • 2020年5月3日
    「SVGで表示する」を追記しました。

いろいろなアイコンが画像ではなく文字として使えるアイコンフォント。
そのアイコンフォントを提供しているサービスの中で有名なのが『FontAwesome』です。

当サイトでも以前導入方法や使い方の記事を書きました。

アイコンフォントを使うにはコードを表示するためのコード(読み込むためのコード)をサイトのHEADに入れなくてはならないのですが、そのコードの取得方法が変更されています。

以前はコードが掲載されていたのでそれをコピーして貼り付けるだけでよかったんです。現在でもコードをコピーして貼り付けるだけではありますが、コードを取得するためには『アカウント登録』が必要になりました。

そこで今回は『FontAwesomedのコードの取得方法』について描きたいと思います。

スポンサーリンク

FontAwesomeとは

FontAwesomeとは、様々なアイコンを文字として利用できるツールです。アイコンは画像ではなく文字として利用できるのでサイズを大きくしたり、色を付けたりすることができます。

Font Awesome6が公開されましたが、Font Awesome6からFree(無料版)は無くなり、有料(サブスク)のみとなりました。(2021年7月)

※この記事で紹介しているのはFont Awesome5 Freeの登録・取得方法です。

利用するために

アイコンを利用する方法はCDNダウンロードと2種類あります。

CDNは、アイコンを読み込むためのコードを入れてFontAwesomeのサーバーからデータを読み込んで利用する方法でダウンロードはアイコンのデータを自分のサーバーに入れて読み込んで使用する方法です。

きらり

きらり

どっちがいいの?

結耶

結耶

CDNのが楽だよ。読み込みコードをHEADタグ内に入れるだけで使えるしね。
だから今から書くコードの取得方法はCDNを利用するためのものなんだよ。

CDNを使ってアイコンを利用するためのコードの取得方法が変更されているのでコードの取得方法を次の項で説明します。

スポンサーリンク

読み込みコードの取得方法

以前は読み込みコードはサイトに掲載されていたのでそれをコピーして自分のサイトのHEAD内に貼り付けるだけでよかったのですが、現在読み込みコードの取得にはアカウント登録が必要です。

Font Awesomeに移動します。

Start for Free』というボタンまたはメニューの『Start』をクリック

メールアドレスを入力して横のSand Kit Code </>をクリック

メールが届くのでメールの中のClick to Confirm Your Email Address + Set Things Upをクリックしてください。

クリックするとパスワードを入力する画面が表示されるのでパスワードを設定してください。(下に確認用パスワードを入力)してSet Password and Continueをクリック

パスワードいを設定すると以下のような画面が表示されます。これはアンケートなので答えてもいいですが、キャンセルしても大丈夫なので赤枠の箇所をクリックして飛ばしてください。

コードが表示されます。赤枠の部分のコードを自分のサイトのHEAD内に挿入してください。

結耶

結耶

これでコードの取得は完了です。HEAD内にコードを挿入すればアイコンフォントを使えます。

きらり

きらり

結耶、黒塗りしてるところは何?

結耶

結耶

IDみたいだよ。今まではコードはみんな共通だったのに…コードにIDが入ってる。
英語読めないからよくわからないけど、1つのキット(コード)にIDが付くみたいでキットは追加もできるみたい。

2020年5月3日 追記

SVGで表示する

アイコンの表示を「Webフォント」としてではなく「SVG」で表示させる場合は設定が必要です。

Font Awesomeにログイン

Font Awesomeにログインして右上にある (ユーザー)アイコンをクリックして「kits」をクリック

表示方法を変更する

Settings」をクリックしてください。クリックすると設定画面が表示されますその中に「Web Font」か「SVG」か選択できる項目がありますので、「SVG」にチェックを入れ下にあるSave Changesをクリックしてください。

結耶

結耶

これでアイコンが「SVG」で表示されます。SVGで表示すると「擬似要素」での指定方法が少し違いますのでご注意ください。

SVGで表示する場合、擬似要素で指定するときに「font-family」「font-weight」「content」の他に「display: none ;を追加する必要があります。

最後に

コードの取得がアカウント登録制になり、コードも今まではCSSとJavaScriptno2つがあったのがJavaScriptに統一したようです(^^;

コードがJavaScriptになっても使い方は変わりません。また今までのCSSでもアイコンフォントは使えます。

きらり

きらり

なんか面倒くさくなったね。

結耶

結耶

コードの取得はね。使い方は変わらないけどね。

これから導入を考えている方はぜひ参考にしてください。

スポンサーリンク

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人
結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター
きらり
きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。