Font AwesomeでフリーのアイコンをHTMLに追加する方法

  • ブックマーク
  • Feedly

Font Awesomeにログインする

Googleで検索して、Font Awesomeのサイトを開き、右上の[Sign In]をクリックします。

Font Awesomeにログインする

  1. メールアドレスを入力します。
  2. パスワードを入力します。
  3. [Sign In]をクリックします。

Font Awesomeにログインする

Scriptタグを確認する

ログイン後の画面で、右上にある人型のアイコンをクリックします。

右上にある人型のアイコン

アカウントメニューのKitsをクリックします。

アカウントメニューのKitsをクリックします。

[0a6457bfd1]をクリックします。

0a6457bfd1

  1. [Copy Kit Code]をクリックします。クリックするとScriptタグがコピーされます。
  2. 自分が作っているHTMLのheadにコピーしたScriptタグを追加します。
  3. [Icons]をクリックします。

Scriptタグを確認する

アイコンを追加する

アイコン検索画面で次のように操作します。

  1. 自分が使いたいアイコンを検索します。
  2. 自分が使いたいアイコンをクリックします。

アイコンを検索する

[Start Using This Icon]をクリックします。

アイコンを追加する

コピーボタンをクリックして、アイコンを追加するタグをコピーします。このコピーしたコードを自分が作成しているHTMLに追加します。

アイコンを追加する

関連記事

我田引水

古い時代、まだHTML4.0やCSSなんてなかった頃と比べると、大分、変わったなぁと思う。細かい設定ができるようになったし、プログラム構造も分かりやすい。程良く抽象化されてるし、いい言語だなぁとしみじみ思いました。

この方法はドットインストールで勉強したので、興味があればどうぞ。

この記事を書いた人

羽沢 仁

羽沢 仁

業務系システムのエンジニアとして、コンサルティング会社で5年、事業会社の社内SEとして5年、フリーランスとして6年、要求定義、設計、開発、テスト、リリース対応の業務に携わってきました。来年からは、街の○○屋さんと直接つながって、ITツールを提供するサービスを開始します。詳しいプロフィールはこちらをご参照ください。