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

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

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

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

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

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

スポンサーリンク

FontAwesomeとは

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

FontAwesome 公式

利用するために

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

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

きらり
きらり

どっちがいいの?

結耶
結耶

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

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

スポンサーリンク

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

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

1.Font Awesomeに移動します。

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

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

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

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

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

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

結耶
結耶

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

きらり
きらり

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

結耶
結耶

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

最後に

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

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

きらり
きらり

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

結耶
結耶

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

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

スポンサーリンク
応援よろしくお願いします。
      ブログランキング・にほんブログ村へ
   Blog People
お問い合わせはこちら
この記事を書いた人

結耶(ゆうや)

2017年9月からブログ、アフィリエイトを知識ゼロから始めたまだまだ駆け出しです。ブログやWordPress、アフィリエイトを勉強しています!
多発性硬化症(MS)という難病と闘っています。