アイコンを簡単に使いたい！そんな時に便利なフリーで使えるアイコン集『Font Awesome』
こんにちは！ あますた(@amaguristar)です。
ブログなどの文章を書いてると、「ここにアイコンを入れた方が分かりやすいいよな？」と思う時、ありませんか？
とはいえ、「良い感じのアイコン持ってないし、探すのも手間だし、使わなくていっか」と諦めてませんか？
そんな方に朗報です。Webアイコンフォントである『Font Awesome』で、良質なアイコンが無料で利用可能。
今回は、『Font Awesome』の使い方を簡単にご紹介します。
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つの方法があります。
それぞれの方法を簡潔に説明します。
ダウンロードして利用
下記に表示するFont Awesomeの公式サイトにアクセスし、データをダウンロード。
トップページにある『Start for Free』を選択。
画面をスクロールして『Download』をクリック。
「Download Font Awesome Free for the Web」ボタンを押すとダウンロードが始まります。そんなに大きなファイルではないのですぐにダウンロード完了。
「fontawesome-free-5.15.4-web.zip」というZIPファイルがダウンロードされるので解凍。
注意！
freeの後の数字(今回は5.15.4)はバージョンのため、タイミングにより違う可能性あり
解答後のフォルダには各種設定時に必要なファイルが入ってますが、主に利用するのは、「css」と「webfonts」フォルダの2つ。
今回はこの2つのフォルダを「fontawesome」というフォルダに入れてサーバーにアップロード。
注意！
「css」「webfonts」フォルダは同じフォルダに入れること。アップロードする場所は、サイトから参照できるならどこでも可
サーバーにファイルをアップロードするには今回「Cyberduck」を使いました。使い方は下記リンク参照。
後は、<head>タグ内に下記を追加すれば準備完了。
<link href="/fontawesomeをアップしたフォルダアドレス/css/all.css" rel="stylesheet"><!--load all styles -->アップロードしたフォルダアドレスはご自身で適切なものに変えて下さい。これで準備完了です。
CDNで利用
CDNを利用すると、ダウンロードしなくても利用できます。利用する為にはメールアドレスの登録が必要です。
POINT！
以前は登録なしでも使えましたが、5から使い方が変更になった様子
POINT！
CDNとは、「Content Delivery Network」の略。同一のコンテンツを、 多くの配布先に効率的に配布するために使われる仕組み。詳細は割愛
公式サイトのトップ画面で「Start for Free」を選択。ここまではダウンロード版と同じ。
トップ画面にある「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」を利用する為のコードが作成されるので、そのコードを<head>タグ内に追加すれば準備完了です。
利用の仕方
2の1・2どちらかの方法で準備を完了したら使い方は同じ。基本的には下記3手順。
- Font Awesomeから使いたいアイコンを選択
- 使いたい箇所にコードを追加
- 好みによって色やサイズを変更(※)
1.Font Awesomeから使いたいアイコンを選択
トップ画面の上部にあるメニューからアイコンメニューを選択。もしくは、使いたいアイコンを検索窓に入力。検索を使う際は英語で入力する必要あり。
iconメニューもしくは、検索結果から使いたいアイコンを選択。
2.使いたい箇所にコードを追加
今回は試しにレジを使います。右下の「Start Using icon」をクリックすると、
利用する為のコードが表示されるので、使いたい場所に挿入するだけ(右下にあるクリップボードのアイコンを押すとすぐにコピーできます)。
試しに使うとこんな感じ。
←ここにアイコンが表示されてるはず。
↑のhtmlのコードは
<i class="fas fa-cash-register"></i> ←ここにアイコンが表示されてるはず。です。他のアイコンも同様に利用可能。
POINT！
※ 色や大きさも簡単に変更可能ですが、それは別で紹介します
まとめ
いかがだったでしょうか？ 設定さえしっかりできれば好きなアイコンを選ぶだけで簡単にアイコンを表示可能。
まとめると、『ダウンロードもしくはCDNの設定後、使いたいアイコンのコードを入手して貼り付けるだけ』で、利用できます。
色やサイズの変え方は近々別で紹介します。
YouTubeでも説明してます↓↓↓
>> https://youtu.be/u5F9jucTiZg
具体的な使い方は↓↓↓
>> https://fun.wazn.jp/info/563/
FontAwesomeのまとめ一覧↓↓↓
>> https://fun.wazn.jp/info/969/
この記事へのコメントはありません。