アイコンフォント FontAwesomeのコード取得方法
- 2020年5月3日
「SVGで表示する」を追記しました。
いろいろなアイコンが画像ではなく文字として使えるアイコンフォント。
そのアイコンフォントを提供しているサービスの中で有名なのが『FontAwesome』です。
当サイトでも以前導入方法や使い方の記事を書きました。
https://kirari-yums.net/post-3228/アイコンフォントを使うにはコードを表示するためのコード(読み込むためのコード)をサイトの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にログインして右上にある (ユーザー)アイコンをクリックして「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やアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。