0

Font Awesome ver6の使い方

Font Awesome ver6の使い方

2022年3月現在、Font Awesomeの最新がVer6.1.1になっていました。
過去にも利用方法をご紹介しましたが、バージョンアップされているので、最新の使い方を改めてメモしておこうと思います。

▼過去記事はこちらからどうぞ

改めて、そもそも「Font Awesome」って何?というところから確認していきます。

1.Font Awesomeって何?

Font Awesomeとは、商用利用が可能なWebアイコンフォントやSVGを提供しているサービスです。矢印やSNSアイコンなどちょっとしたアイコンマークを配置したい際に非常に便利で、webサイトやアプリ、Word、PDFなどのドキュメントなどにも埋め込んで利用することができます。

Webアイコンフォントってなに?

Webアイコンフォントとは、webサイトでフォントと同じように表示できるアイコンです。

これまで、画像で配置していたマーク的なものをアイコンフォントに変更することによって、拡大や縮小しても画質が荒れる心配もなく、色やサイズの変更もCSSで簡単にできます。さらにはアニメーションをつけるということも可能なため、数多くのwebサイトで利用されています。

無料版と有料版の違いは?

無料版の利用でも「商用利用」は可能です!

  無料版 有料版
利用できるアイコン数 2,009個 14,074個
利用できるKit数 1個 20個~無限

とりあえず使ってみたいという方は、無料版で試してみてアイコン数が足りないと感じたら有料版にアップグレードしても良いでしょう。

アイコンスタイルが6つある

以下のような6つのスタイルがあります。

6つのスタイル

  • SOLID・・・・・塗りつぶし
  • REGULAR・・・ライン
  • LIGHT・・・・・細いライン
  • THIN・・・・・より細いライン
  • DUOTONE・・・濃淡で立体的
  • BRANDS・・・・ブランドロゴ

 

塗りつぶしや線の細いシンプルなアイコンが用意されており、お好みで選択ができるようになっています。アイコンによっては、有料版(Pro)でしか利用できないスタイルもあるので、確認してください。

2.Font Awesomeの導入方法

Font Awesomeを使うには大きく2つの方法があります。

 

  1. CDNを利用して使う
  2. ファイルを自分のサーバーにアップロードして使う

 

簡単に使いたい方は「1.CDNを利用して使う」で試してみると良いでしょう。

1.CDNを利用して使う方法

CDNを利用して使うメリットは、アイコンなどを自身のサーバーにアップロードする必要がないため、サーバーへの負荷を考える必要がありません。また、HTMLタグを貼り付けるだけなので作業も簡単です。

また、CDNを利用して使う場合にはさらに2種類の方法があります。

 

  1. JavaScriptで読み込む
  2. CSSで読み込む

 

順を追って見ていきましょう。

1.JavaScriptで読み込む場合

JavaScriptで読み込む場合には、アカウント登録が必要です。登録の手順を見ていきましょう。

まずは、Font Awesomeの公式サイトから「Start」のページへ移動します。

アカウント登録

すると「Get Started with Font Awesome」というメッセージ画面へ移動します。

黄色い枠線の中に、自分のメールアドレスを入力して「Send Kit Code」という黄色いボタンをクリックしてアカウント登録用のメールアドレスを登録します。

Get Started with Font Awesome

ボタンをクリックすると「Check Your Email」というメッセージが表示されるので、入力したメールアドレスの受信箱を確認します。

Confirm Your Font Awesome Account Email Address」というタイトルのメールが送られてきますので、本文を確認します。

Click to Confirm Your Email Address + Set Things Up」というボタンをクリックします。

最後に、パスワードを登録します。上と下に同じパスワードを入力して「Set Password & Continue」をクリックします。

すると、自分のアカウントが登録され、独自の「Kit’s Code」が発行されます。

下の画像の上部黄色い枠線の中が「あなたのコード」です。①の<script>コードを利用したいwebサイトの<head>~</head>タグ内にコピペすればすぐに利用することができます。

 

ここまでできたら「3.アイコンをwebサイトに表示してみる」へ進んでください↓

 

2.CSSで読み込む場合

Font AwesomeのGitHubのページへアクセスして、CDNコードをコピーしましょう。

GitHub

黄色の枠の部分をコピーして、webサイトの<head>~</head>内に貼り付けます。

ここまでできたら「3.アイコンをwebサイトに表示してみる」へ進んでください↓

 

2.ダウンロードして使う方法

ファイルをダウンロードして利用する場合は、Font Awesome公式サイトの「Download」ボタンをクリックします。

ダウンロード

すると下の画面に移動しますので、左側の「6.1.1 For The Web」の「Free For Web」をクリックします。

すると、「fontawesome-free-6.1.1-web.zip」がダウンロードされますので、解凍してください。

中には各種フォルダーがありますが、ひとまず必要なのは「css」フォルダの中の「all.min.css」です。

cssフォルダの中には、下のようなファイルがあります。

この「all.min.css」ファイルを、使いたいwebサイトの<head>~</head>内で読み込めばOKです。※配置する階層は的確な場所に置くようにしましょう。

 

3.アイコンをwebサイトに表示してみる

CDNまたはダウンロードのいずれかの手順で、<head>タグ内に読み込ませたら、次は実際にアイコンをサイト上に表示させていきましょう。

アイコンの表示方法は、以下の2パターンあります。

 

  1. HTMLに記述する
  2. CSSに記述する

 

どちらかやりやすい方を選択してください。

1.HTMLに記述する

それでは先に、1.HTMLに記述するやり方を見ていきましょう。

Font Awesome公式サイトのIconページを開きます。
※無料版を利用する場合は、左カラムの「Free」にチェックを入れてください。

Iconページ

無料で使える2,009個のアイコンに絞り込まれます。

アイコンを選ぶ

例えば下の画像の黄色枠の「angle-down(下向きの矢印)」を使いたいとします。

クリックすると下のようなウィンドウが表示されますので、HTMLに記載の<i>~</i>タグ部分をコピーします。

angle-down

HTMLにペーストする

コピーしたタグを、HTMLの表示したい箇所にそのまま記述すればOKです。

デモページを確認する

2.CSSで記述する

次にCSSを使って記述する方法を見ていきます。

アイコンを選ぶ

先程と同じようにIconページから使いたいアイコンを選びます。
今度は下図の黄色枠の「Unicode」をコピーします。

address-bookのアイコンのUnicodeは「f2b9」ですね。

CSSで記述する

CSSに記述する

この場合のHTMLコードは以下とします。

iconクラスのcontentプロパティに、「半角のバックスラッシュ」を入れます。慣れないかもしれませんが覚えておいてください。

デモページを確認する

これで完了です!お疲れ様でした!

最後に

Font Awesomeの導入方法は以上になります。ここまで試してみて表示されないなど不具合がある場合は、有料版のアイコンやスタイルを無料で利用しようとしている。読み込んでいるFont Awesomeのバージョンが一致していない。などが考えられます。もし、表示されない場合は今一度確認してみてください。

有料版は年間$99~が利用ができますが、まずは無料版でお試ししてからアップグレードするか考えても良いと思います。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > WEB DESIGN > HTML > Font Awesome ver6の使い方