アイコンフォント FontAwesomeのコード取得方法
- 2023年12月09日バージョン6が使えるようになったので見直しました。
- 2020年05月03日「SVGで表示する」を追記しました。
いろいろなアイコンが画像ではなく文字として使えるアイコンフォント。
そのアイコンフォントを提供しているサービスの中で有名なのが『FontAwesome』です。
当サイトでも以前導入方法や使い方の記事を書きました。
https://kirari-yums.net/post-3228/アイコンフォントを使うにはコードを表示するためのコード(読み込むためのコード)をサイトのHEADに入れなくてはならないのですが、そのコードの取得方法が変更されています。
以前はコードが掲載されていたのでそれをコピーして貼り付けるだけでよかったんです。現在でもコードをコピーして貼り付けるだけではありますが、コードを取得するためには『アカウント登録』が必要になりました。
そこで今回は『FontAwesomedのコードの取得方法』について描きたいと思います。
FontAwesomeとは
FontAwesomeとは、様々なアイコンを文字として利用できるツールです。アイコンは画像ではなく文字として利用できるのでサイズを大きくしたり、色を付けたりすることができます。
使用する前に
Font Awesomeを使うにはアカウント登録が必要です。アカウントをお持ちでない方はアカウント登録してください。
アカウント登録
Font Awesomeに移動
『Start for Free』をクリック
『Start for Free』というボタンまたはメニューの『Start』をクリック
メールアドレスを入力
メールアドレスを入力して、その下のチェックボックスにチェックを入れてください。(チェックボックスは利用規約、プライバシー・ポリシーに同意するためのものです。)
メールアドレスを入力したら「Send Kit Embed code」をクリックしてください。
メールの確認
メールが届くのでメールの中の画像の赤枠の部分のリンクをクリック。
パスワードを設定する
クリックするとパスワードを入力する画面が表示されるのでパスワードを設定してください。(下に確認用パスワードを入力)してSet Password and Continueをクリック
登録完了
パスワードいを設定したら登録は完了です。
以下のような画面が表示された場合、これはアンケートなので答えてもいいですが、キャンセルしても大丈夫なので赤枠の箇所をクリックして飛ばしてください。
コードが表示されます。赤枠の部分のコードを自分のサイトのHEAD内に挿入してください。
読み込み方法
アイコンフォントの読み込み方法は2つあります。
- Kitを利用して読み込む
- ダウンロード(ファイルをサーバーに設置)して読み込む
アイコンのファイルをダウンロードして読み込む方法はちょっと難しいので、Kitを利用して読み込む方法を紹介します。
Kitを作成する
アカウント登録ができたらKitを作を作成します。
Font Awesomeにログイン
「Your Kit」をクリック
上図のページではなくアカウントページが表示された場合は、下にスクロールすると「Kit」という項目があるのでそこにある「Your Kit」か上部の「Kit」をクリックしてください。
「Add New Kit」をクリック
Kitの設定
Kitの設定を行ってください。
- Icons：Free
- Technology：web Fonts
- Version：使いたいアイコンフォントのバージョンを選んでください
読み込むためのコード
Kitを作成するとIDが割り当てられます。
右下の「Settings」をクリックしてください。
「Settings」をクリックすると下の画像のページが表示されます。赤枠の部分のコードをコピーしてください。
コピーしたコードはサイトのHEAD内に貼り付けてください。
WordPressをお使いの方で貼り付ける場所が解らない場合は以下の記事を参考にしてください。
HEAD内にコードを貼り付けられればアイコンフォントが使えるようになります。
使い方は以下の記事を参考にしてください。
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 ;を追加する必要があります。
ポチップ
最後に
Font Awesomeはアカウント登録が必要となりました。さらに以前は読み込むためのコードをコピペするだけで使えましたが、読み込むためのコードを取得するためにKitの作成が必要となりました。
少し手間がかかりますが、Font Awesomeの新しいバージョン6もFreeで使えるので登録してもいいと思います。
Font Awesomeの導入を考えている方は参考にしてください。
これから導入を考えている方はぜひ参考にしてください。
前はコピペするだけだったのに面倒くさくなったよね。
仕方ないよ。登録しておけば後は頻繁に変えるものでもないから登録しておいた方が安心だよ。
2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。
ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。
