アイコンを簡単に使いたい!そんな時に便利なフリーで使えるアイコン集『Font Awesome』

fontawesome-thumbnail
WEB / プログラミング / IT系

こんにちは! あますた(@amaguristar)です。

ブログなどの文章を書いてると、「ここにアイコンを入れた方が分かりやすいいよな?」と思う時、ありませんか?

とはいえ、「良い感じのアイコン持ってないし、探すのも手間だし、使わなくていっか」と諦めてませんか?

そんな方に朗報です。Webアイコンフォントである『Font Awesome』で、良質なアイコンが無料で利用可能。

今回は、『Font Awesome』の使い方を簡単にご紹介します。

目次
  1. Font Awesomeってなに?
  2. 利用するための準備
  3. 利用の仕方
  4. まとめ

YouTubeでも説明してます↓↓↓
>> https://youtu.be/u5F9jucTiZg

具体的な使い方は↓↓↓
>> https://fun.wazn.jp/info/563/

1.Font Awesomeってなに?

Font Awesomeは、冒頭でも軽くお伝えしましたが、無料で利用できるWebアイコンフォントです。

POINT!
Webアイコンフォントとは、その名の通り、文字と同じ様に利用できるアイコン。文字と同じなので、サイズを変えても画質が荒くならず、色も自由に変更可能。

アイコンのクオリティが高いので、多くのサイトで利用されてます。

無料版と有料版がありますが、違いは利用できるアイコンの種類と、使える機能です。当然無料版は制限がありますが、ブログや小規模サイトであれば十分です。

注意!
フリープランはサイトPVによる条件あり。大規模サイトや、売れっ子ブロガーさん、インフルエンサーの方は要注意。今現在は月10万PVまではフリープランで利用可能。条件等は変わる可能性があるので、利用する前に自身で確実に確認

2.利用するための準備

Font Awesomeを利用するには下記2つの方法があります。

  1. ダウンロードして利用
  2. CDNで利用

それぞれの方法を簡潔に説明します。

ダウンロードして利用

下記に表示するFont Awesomeの公式サイトにアクセスし、データをダウンロード。

>> Font Awesome公式サイトへ

Start for Freeでデータを参照
Start for Freeでデータを参照

トップページにある『Start for Free』を選択。

Download
Download

画面をスクロールして『Download』をクリック。

ダウンロードボタンをクリック
ダウンロードボタンをクリック

Download Font Awesome Free for the Web」ボタンを押すとダウンロードが始まります。そんなに大きなファイルではないのですぐにダウンロード完了。

zipファイルがダウンロードされます
zipファイルがダウンロードされます

fontawesome-free-5.15.4-web.zip」というZIPファイルがダウンロードされるので解凍。

注意!
freeの後の数字(今回は5.15.4)はバージョンのため、タイミングにより違う可能性あり

解答後のフォルダ
解答後のフォルダ

解答後のフォルダには各種設定時に必要なファイルが入ってますが、主に利用するのは、「css」と「webfonts」フォルダの2つ。

今回はこの2つのフォルダを「fontawesome」というフォルダに入れてサーバーにアップロード。

注意!
「css」「webfonts」フォルダは同じフォルダに入れること。アップロードする場所は、サイトから参照できるならどこでも可

「css」「webfonts」フォルダをサーバーにアップ
「css」「webfonts」フォルダをサーバーにアップ

サーバーにファイルをアップロードするには今回「Cyberduck」を使いました。使い方は下記リンク参照。

>> Cyberduckの使い方

後は、<head>タグ内に下記を追加すれば準備完了。

<link href="/fontawesomeをアップしたフォルダアドレス/css/all.css" rel="stylesheet"><!--load all styles -->

アップロードしたフォルダアドレスはご自身で適切なものに変えて下さい。これで準備完了です。

CDNで利用

CDNを利用すると、ダウンロードしなくても利用できます。利用する為にはメールアドレスの登録が必要です。

POINT!
以前は登録なしでも使えましたが、5から使い方が変更になった様子

POINT!
CDNとは、「Content Delivery Network」の略。同一のコンテンツを、 多くの配布先に効率的に配布するために使われる仕組み。詳細は割愛

>> Font Awesome公式サイトへ

Start for Freeでデータを参照
Start for Freeでデータを参照

公式サイトのトップ画面で「Start for Free」を選択。ここまではダウンロード版と同じ。

emailを登録
emailを登録

トップ画面にある「Enter your email to create your first kit!」と書かれた下のBoxにemailを入力後、右側の「Send Kit Code」をクリック。

この画面になったらメールをチェック
この画面になったらメールをチェック

メールを送りましたよ的な内容の画面に切り替わるので登録したメールの受信をチェック。

注意!
「Resend 〜」というボタンは「再送信」なので基本押さない。しばらく経ってもメールが届かない場合に押して下さい。

メールが届いてたらサインアップ
メールが届いてたらサインアップ

後もう少しで登録が完了します的なメールが届いてますので、メールの真ん中にある「Click to 〜」というところをクリック。

パスワードの設定
パスワードの設定

メールからサイトにアクセスすると、パスワード設定画面にいくので、パスワードを設定。その後、「Set Password & Continue」ボタンが選択できるようになるのでクリック。

ユーザー名などの登録
ユーザー名などの登録

ユーザー名などを設定する画面になりますので、適切に設定。登録したくない時は「No thanks.Let's skip this step for now.」を押すと次に進みます。

設定完了後、Font Awesomeを利用する為のコードが表示
設定完了後、Font Awesomeを利用する為のコードが表示

設定が完了すると「Font Awesome」を利用する為のコードが作成されるので、そのコードを<head>タグ内に追加すれば準備完了です。

利用の仕方

2の1・2どちらかの方法で準備を完了したら使い方は同じ。基本的には下記3手順。

  1. Font Awesomeから使いたいアイコンを選択
  2. 使いたい箇所にコードを追加
  3. 好みによって色やサイズを変更(※)

1.Font Awesomeから使いたいアイコンを選択

トップ画面の上部にあるメニューからアイコン選択
トップ画面の上部にあるメニューからアイコン選択

トップ画面の上部にあるメニューからアイコンメニューを選択。もしくは、使いたいアイコンを検索窓に入力。検索を使う際は英語で入力する必要あり。

>> Font Awesome公式サイトへ

アイコン一覧から使いたいものを選択
アイコン一覧から使いたいものを選択

iconメニューもしくは、検索結果から使いたいアイコンを選択。

2.使いたい箇所にコードを追加

今回はレジを使います
今回はレジを使います

今回は試しにレジを使います。右下の「Start Using icon」をクリックすると、

利用する為のコードが表示される
利用する為のコードが表示される

利用する為のコードが表示されるので、使いたい場所に挿入するだけ(右下にあるクリップボードのアイコンを押すとすぐにコピーできます)。

試しに使うとこんな感じ。

←ここにアイコンが表示されてるはず。

↑のhtmlのコードは

<i class="fas fa-cash-register"></i> ←ここにアイコンが表示されてるはず。

です。他のアイコンも同様に利用可能。

POINT!
※ 色や大きさも簡単に変更可能ですが、それは別で紹介します

まとめ

いかがだったでしょうか? 設定さえしっかりできれば好きなアイコンを選ぶだけで簡単にアイコンを表示可能。

まとめると、『ダウンロードもしくはCDNの設定後、使いたいアイコンのコードを入手して貼り付けるだけ』で、利用できます。

色やサイズの変え方は近々別で紹介します。

>> Font Awesome公式サイトへ

YouTubeでも説明してます↓↓↓
>> https://youtu.be/u5F9jucTiZg

具体的な使い方は↓↓↓
>> https://fun.wazn.jp/info/563/

FontAwesomeのまとめ一覧↓↓↓
>> https://fun.wazn.jp/info/969/

あますた

778 views

電気工学科卒の元プログラマの現飲食店オーナー。間に不動産管理、営業等も経験。ここでは、自分の経験とお客様に聞いた話を基に、役立つ情報を発信していこうと思いま...

プロフィール

ピックアップ記事

関連記事一覧

  1. この記事へのコメントはありません。

CAPTCHA


ABOUT

”わくわく”や”驚き”等、『心の栄養』を与えられる、『楽しい』でつながるWebメディアを目指します。
ABOUT

最新記事