Font Awesomeアイコンの登録方法と使い方

Webページにアイコンを表示できる「Font Awesome」デザイン制作によく使われるようになったアイコンですが、アカウントを登録しないと使えないようになってしまったので登録方法をまとめてみました。

Font Awesomeアカウント登録の流れ

まずは公式サイトにアクセスして、「Start for Free」をクリックします。

自分のメールアドレスを入力して、「Send Kit Code」をクリック。

するとメールで通知が届くので、リンク先をクリック。

パスワードとユーザー名などを入力していきます。
この部分、スクリーンショットを撮り忘れてしまいました。

Font Awesomeの使い方

アカウントを作成してログインすると、javascriptのコードが表示されているので、Webサイトの<head>〜</head>タグの間に貼り付けます。

次は表示させたいアイコンを検索します。この辺りは今までのバージョンと同じです。
例えばFacebookのアイコンの場合は、検索窓に「Facebook」と入力します。

<i>〜</i>までのコードをコピーして、表示させるサイトの<body>〜</body>の間に貼り付けます。
実際のサイト上に表示できていれば完成です。

[公開日] 2020年7月20日　/　[最終更新日] 2020年7月20日　カテゴリー：WEBデザイン

この記事を書いた人

ポポデザイン
西宮市在住のWEBデザイナー・クリエイター。ホームページの制作からディレクション、イラスト、SEOなど制作からユーザーのサポートまで幅広く、初心者のかたも分かりやすい対応を心がけております。(プロフィール)
Facebook｜Twitter｜Instagram

この記事が気に入ったら
いいね！をお願いします

Follow @popodesign

最新情報をお届けします

同じカテゴリーの記事

無料で使えるPHPメールフォーム「MailForm01」の使い方
ホームページを作るときに必要になるのがお問い合わせのメールフォームですが、HTMLで手打ちで作る場合だとWordPressなどのようにメールフォームのプラグインがなかったりします。今回は無料から使える確認画面付きメール… [続きを読む]
ロリポップのスタンダードプラン・アップデートの使用感
ロリポップサーバーのスタンダードプランで、アップデートの通知が来ていたので実際の制作案件でも使用してみることにしました。特にWordPressサイトの表示速度がもっさりと遅いのが気になっていましたので。アップデート後のス… [続きを読む]
エックスサーバーで常時SSL化「http→https」301リダイレクト転送設定をする方法
エックスサーバーで無料SSL（https）を取得したものの、httpのアドレスでアクセスしても表示されてしまう場合に手動でhttpsのアドレスに転送して、統一方法を覚え書きメモとして記載します。今回は.htaccess… [続きを読む]
Adobeソフトをお得に安く買う方法！画像付きで解説【ヒューマンアカデミー版】
デザイナーが仕事するなら必須のAdobeソフトですが、普通に公式サイトで買うと年間７万円以上かかって高い！ので、少しでも負担が減るよう通信講座「ヒューマンアカデミーたのまな」の学生になって学割を使えるようにしました。 … [続きを読む]