【Font Awesome 6】アカウントを作成して「Webアイコン」を設定・導入する方法まとめ!(セットアップ手順の画像付き!たった10分で設定完了!)

Font Awesome を使う時のために、セットアップ手順をまとめまてみました!

目次

「Font Awesome 6」の準備

まずは、ブラウザで「Font Awesome」のサイトにアクセスします。

アクセスすると、ホーム画面の中央に「Start for Free」と書かれているボタンがあるので、こちらをクリックします。
次に、メールアドレスの入力を求められるので、入力した上で、「Send Kit Code」をクリックします。

すると、「Font Awesome」から、入力したメールアドレス宛に自動でメールが届きます。
そのメールを開き、青色の「Click to Confirm Your Email Address + Set Things Up」のボタンをクリックしましょう。

メールを開いて、
下の「Click to Confirm Your Email Address + Set Things Up」をクリック

リンクが開き、以下の画面が表示されます。
ログイン用のパスワードを設定する画面ですので、任意のパスワードを確認用も含めて2回入力し、「Set Password & Continue ⇨」をクリック。

次の画面では、「first name」と「last name」だけ入力して「All set. Let’s go!」をクリックしちゃいます。(下2つは、「FontAwesomeをいつから使い始めたか」と「好きなアイコンは」というアンケート的な質問なのでスルーしちゃいます。)

これで「Font Awesome」の下準備(スクリプトコードの発行)が完了しました。

あとは、以下のような<script src=”〜から始まるコードをコピーしておき、「HTMLファイル」などに貼り付けてあげます。
(このコードはアカウントごとで異なるため必ず発行したコードを使ってください。)

<script src="https://kit.fontawesome.com/xxxxxxxxxx.js" crossorigin="anonymous"></script>

※「xxxxxxxxxx.js」の部分が個人ごとに変わります。

「Font Awesome 5」(古いバージョン)を使いたいとき

今回は、最新版の「Font Awesome 6」で設定しましたが、「訳あって、古いバージョンを使いたい。」というときには簡単に変更が可能です。

先程の「Font Awesome」のサイトにログインした状態で、「Setting」メニューを開きます。
そこで下にスクロールすると、「Version」の項目があるので、「Latest 6.x」から「Latest 5.x」に変更した上で、画面一番下の「Save Changes」をクリックして変更を反映させます。

これでバージョンの変更は完了です。5分もしないうちに反映してくれますよ。

「Font Awesome」を使った設定例

「Font Awesome」と「Bootstrap」を組み合わせた設定例がいくつかあります!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次