【超簡単】Font Awesomeでアイコンを表示させる方法

青山優

投稿日： 2021.07.01

WebサイトやWebアプリでアイコンを表示させたい場面が多々ありますよね。Font Awesomeであればリテラシーが高くなくても簡単にアイコンを表示することができます。この記事では最新版のFont Awesomeの始め方について手順に沿ってまとめました。

Font Awesomeとは

Font AwesomeとはWeb上でアイコンを表示させたい場合に使います。多くの人が利用しており、素晴らしいライブラリとして定評があります。アイコンを、画像としてではなくフォント(文字)として使用するため、大きさや色の変更ができるのはもちろん、アイコン内に文字を入れることもできるとても便利なツールです。これらの機能が無料版でも利用でき、それに加え商標利用も可能です。

Font Awesomeに会員登録する

手順(１)： Font Awesomeにアクセスして「Start for Free」（無料版）をクリック。

※今回は無料版の説明です。無料版でも十分に素晴らしい機能を利用でき、まずは無料版をお試しされることをおすすめしております。

手順(２)： ①メアドを記入し、②Send Kit Codeをクリックする。

手順(３)：↓このようなメールが来るので「Click to Confirm Your Email Address+Set Things Up」をクリックする。

手順(４)： ①パスワードの設定②パスワード確認③「Set Password&Continue」をクリックする。

手順(５)：①first name(名)②last name(姓)を入力し③はUnknownのままで一旦OK④はお気に入りのFont Awesomeがあれば記入しますが、なければ空欄のままで「All set. Let’s go!」をクリックする。

手順(６)：写真右下の黄色の丸で囲まれてた「Copy Kit Code!」押したらコードがコピーされる。

手順(７)：コピーしたコードを下記のようにheadタグ内に貼り付ける。

<!DOCTYPE html>
<html lang="ja">
  <head>
  <meta charset="UTF-8">
  <!-- ここに貼り付ける-->
  https://kit.fontawesome.com/â¯â¯.js
  </head>
  <body>
...........
  </body>
</html>

いかがでしたか？以上で発行が完了です。複雑なことはせずに簡単に発行できたと思います。決してリテラシーが高くない人でもできるはずです！