アイコンを使いたいのならFont Awesomeがオススメ!使い方も解説[初心者向け]

Font Awesomeの使い方 マークアップ

「アイコンを使いたいけど、どうやって手に入れたらいいんだろう」

「拡大するとアイコンの画像がぼやけてしまう」

あなたには、こんな悩みがありませんか?

その悩み、Font Awesomeを使えば解決します!

この記事では、Font Awesomeの基本的な使い方を解説。

もうアイコンで悩むことはありません。

Font Awesomeとは?

Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

Font Awesomeとは、webサイトにwebアイコンフォントを導入できるサービスです。無料版でも1500種類以上、有料版なら7700種類以上のアイコンを使用できます。

プラン料金
無料版無料
Pro(有料版)$99/年

最新バージョンは、2017年に登場したFont Awesome 5。旧バージョンも利用できます。

webアイコンフォント

webアイコンフォントは、web上で文字と同じように表示できるアイコンのことです。以下のようなメリットがあります。

  • 記述が簡単
  • 拡大しても画像が荒くならない
  • 色やサイズを簡単に変えられる

使用するための準備

Font Awesomeを使うには、次の2種類の方法があります。

CDNを使う

CDN(Content Delivery Network)とは、同一のコンテンツを多くの配布先に効率的に配るための仕組みです。

ユーザー目線で言えば、サーバーからデータを読み込んで使用するので、ダウンロードの必要がない方法です。

Font Awesomeの場合、HTMLファイルのheadタグ内にscriptタグを貼るだけ。

本記事では、この方法をご紹介します。

サーバーにデータをアップロード

自分のサーバーにデータをアップロードして使う方法です。

本記事では扱いません。

アイコンを使うための4ステップ

Font Awesomeを利用するには、次の4つのステップを踏みます。

  1. ユーザー登録
  2. 使いたいアイコンフォントを選ぶ
  3. コードをコピー
  4. 使いたい場所に貼り付け

ユーザー登録

まずは公式ページに行きましょう。

無料版なら「Start for Free」をクリック。

入力フォームにメールアドレスを入力して、「Send Kit Code」をクリックします。

すると確認メールが送られてくるので、記載されたリンクから登録ページに移動。名前とパスワードを設定します。

以上でユーザー登録が完了。

ログイン後、各Kitページに記載されているコードをコピーし、HTMLのheadタグ内に貼り付けます。

これは私のKit
<script src="https://kit.fontawesome.com/あなたのKit ID.js" crossorigin="anonymous"></script>

これでFont Awesomeを使えるようになりました。

使いたいアイコンフォントを選ぶ

Iconsページから使いたいアイコンを選びます。左サイドバーの「Free」をクリックすると、無料のものだけが表示されるので便利です。

使用したいアイコンがあったら、それをクリック。詳細ページに移動しましょう。

コードをコピー

アイコンの上にあるコード(カーソルを乗せると「Copy HTML」と表示されます)をコピーします。

使いたい場所に貼り付け

あとは、HTMLファイルの表示させたい箇所に貼り付けるだけ。

色やサイズを変更するには?

色やサイズを変更したい場合はCSSでスタイルを指定します。

アイコンフォントはあくまでもフォントなので、色を変えるにはcolorプロパティを、サイズを変えるにはfont-sizeプロパティを使用します。

CSSの擬似要素を使って表示させる方法

CSSの擬似要素「::before」「::after」を使って、アイコンを表示させることもできます。

擬似要素については、以下の記事を参照。

例として、下の画像のアイコンを表示させる場合を見ましょう。

例
p::before {
  font-family: "Font Awesome 5 Free";
  content: '\f5d0';
  font-weight: 900;
}

無料版の場合、font-familyには「Font Awesome 5 Free」を指定。

ブランドのアイコンを使用する場合は、font-familyを「Font Awesome 5 Brands」とします。

Solid(Free)Font Awesome 5 Free or
Font Awesome 5 Pro (for pro users)
Regular (Pro)Font Awesome 5 Pro
Light (Pro)Font Awesome 5 Pro
Brands (Free)Font Awesome 5 Brands

contentには「\Unicode」と記述。UnicodeはHTML用コードの左にあります(カーソルを乗せると「Copy Unicode」と表示)。

font-weightは、Solidの場合「900」です。

Solidfont-weight:900
Regularfont-weight:400
Brandsfont-weight:400
Lightfont-weight:300

まとめ

Font Awesomeは、豊富なアイコンが無料で使えます。一度ユーザー登録してしまえば、あとはたったの3ステップ。

  1. アイコンを選んで、
  2. コードをコピーし、
  3. 表示させたい箇所に貼り付け

これだけで1500種類以上(無料版)のアイコンが使い放題。

あなたも早速登録しましょう!

コメント

タイトルとURLをコピーしました