web運営者に役立つノウハウを発信!webで稼ぐブログ【稼グッド】

Font Awesome 5 Proの購入方法と使い方【カンタン図解】

オススメ記事

Font Awesome 5 Proの購入方法と使い方【カンタン図解】

豊富なwebアイコンフォントを手軽に使えるFont AwesomeのProバージョン「Font Awesome 5 Pro」。

「Font Awesome 5 Proを使ってみたいけど、サービスはすべて英語だし、購入の仕方や使い方が分からない。購入してもきちんと使いこなせるか不安・・・」

と諦めてしまっている方も多いのではないでしょうか。

そんな方のために、本記事では「Font Awesome 5 Pro」の購入方法から使い方までを図解で優しく解説します!

スポンサーリンク

Font Awesome 5 Proとは?

Font Awesome(フォント オーサム)とは、サイトやブログでwebアイコンフォントを表示できるサービスです。アイコンフォントは画像と違い、大きさや色をCSSで自由に変更にできて、高解像度のRetinaディスプレイでも劣化することなくキレイに表示できます。

Font Awesome 5 には「無料版」と「有料版(Pro)」があり、Proバージョンはアイコンの種類が豊富で、線の太さも選べるため、細くてオシャレなアイコンを使うことができます。料金は「$60」です。

次項より、Font Awesome 5 Proの購入方法から使い方までを解説していきますので、是非参考にしてみてください!

Font Awesome 5 Proの購入方法

【手順1】サイトにアクセス

Font Awesome Pro」にアクセスして、 [Get a Pro license for $60] をクリックします。(クリックしていきなり課金されたりはしないのでご安心ください!)

[Get a Pro license for $60]

【手順2】ライセンスを選び、メールアドレス・パスワードを入力

[ライセンス] を選択、「Email Address」「Password」「Confirm Password(パスワード確認用)」を入力し、決済方法を選びます。

ライセンスの「Seats:○-○」とは、1つのライセンスで利用可能な人数のことです。個人やチーム5人以下で使用する場合は「Seats:1-5」でOK!

決済方法は「クレジットカード/PayPal」の2つから選べます。
青いボタンが「クレジットカード決済」。PayPal決済する場合は、ボタン下の「PayPal」をクリック!(個人的には海外のサービスを利用する際は、PayPal決済が安心でおすすめです)

PayPal

※PayPalアカウントがない方は、事前に PayPalアカウントを取得 をしておきましょう!

【手順3】決済する

決済画面が表示されるので、[同意して続行] をクリックします。(PayPal決済の場合)

[同意して続行]

無事決済が完了すると、以下のような画面が表示されます。

Awesome Acquired!

【手順4】メールアドレス認証

認証確認メールが届くので、[Confirm my email address] をクリックして、メールアドレスの認証を行います。

[Confirm my email address]

これで、Font Awesome 5 Pro の購入&登録が完了です!続いて、最初の設定をしていきます。次項より!

Font Awesome 5 Proの始め方「登録後 最初の設定」

【手順1】サイトにログイン

Font Awesome 5 Pro ログイン画面 にアクセスし、サインインします。

サインイン

【手順2】名前を入力

名前を入力し、任意の質問に答えます。

◆What’s your first name? = 名前(名)
◆How about your last name? = 苗字(姓)
◆You first used Font awesome in… = 初めてFont Awesomeを使った時期
◆Got a favorite Font Awesome icon? = お気に入りのFont Awesomeアイコン

※この項目は後から、入力・変更可能なので、とりあえずスキップしても構いません!

名前を入力

【手順3】GitHubの設定

とりあえず、ここもスキップしてOK!

GitHubの設定

これで最初の設定は完了です!次項より早速、webアイコンフォントを使っていきましょう!

Font Awesome 5 Proの使い方「アイコンをサイトに表示する」

【手順1】サイトを登録する

Font Awesome 5 Pro を使用するためには、webアイコンフォントを表示させたいサイトを追加する必要があります。

まずは、Font Awesome 5 Pro にサインインして、[Services] > [Add another domain like… bachmania.com] をクリック!

[Services] > [Add another domain like… bachmania.com]

サイトのドメインを入力し、[Yep, I’m cool with this] をクリック!これでドメインを追加できます。(最大30ドメインまで追加可能)

Add a Dmain

※webアイコンフォントが表示できるようになるまで、5分程度かかります。しばらく待ちましょう。

【手順2】CDNコードを<head>に記述

Font Awesome 5 Pro を利用する方法は、「CDNで利用する方法」「データをダウンロードして利用する方法」の2つあります。

CDNとは、カンタンに説明すると「外部のサーバーにあるデータ」を読み込んで自分のwebサイトに表示させる仕組みのこと。つまりアイコンデータをダウンロードして、自分のサーバーにアップロードしなくても使うことができるのです。

個人的には「CDNで利用する方法」がおすすめ!新しいアイコンが追加されたときに、ダウンロードし直す必要はありませんし、自分のサーバーへの負荷も減らすことができます。

※「データをダウンロードして利用する方法」は、本記事では割愛します。

CDNで利用する方法

グローバルメニュー [How to Use] ページより、以下赤枠のコードをコピーしてHTMLの<head>内に記述します。

How to Use

【手順3】アイコンフォントをサイトに表示

グローバルメニュー [icons] ページより、使用したいアイコンを検索し選択。

icons

アイコンフォントをサイトに表示させる方法は、以下2つあります。

①アイコンフォントのコードをHTMLに直接貼り付ける方法
②CSSの擬似要素を使用する方法

①アイコンフォントのコードをHTMLに直接貼り付ける方法

アイコンフォントのコードをHTMLに直接貼り付ける場合は、以下赤枠のコードをコピーして、HTMLの表示させたい箇所にそのまま貼り付けます。

アイコンフォントのコードをHTMLに直接貼り付ける場合

②CSSの擬似要素を使用する方法

CSSの擬似要素(::before/::after)を使用する場合は、以下赤枠のコードをコピーします。

CSSの擬似要素(::before/::after)を使用する場合

▼CSSには以下のように記述。

.icon::before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    content: '\f015';
}

1. font-familyに「Font Awesome 5 Free」「Font Awesome 5 Pro」を指定。(どちらを使用しているによって異なります)

2. font-weightで線の太さを指定。「900(Solid)」「400(Regular or Brands)」「300(Light)」

3. content にアイコンのコードを設定。

font-family、font-weightの表示イメージは、画面右側にある以下赤枠箇所で確認できます!

SOLID REGULAR LIGHT

Font Awesome 5 Proの使い方まとめ

ここでは、Font Awesome 5 Proの購入方法から使い方までを解説しました!

Proバージョン(有料版)は、無料版よりもアイコンの種類が豊富で、細くてオシャレなアイコンフォントが使用できます!

ですが、すべて英語で書かれていて、購入方法や使い方が分からず不安・・・、と諦めてしまっている方も多いのではないでしょうか。そんな方は是非、当サイトを参考にして「Font Awesome 5 Pro」を手に入れてみてください!

※掲載している情報については充分注意・確認をした上で掲載しておりますが、最新性や正確性を保証するものではありません。ユーザー様に、より有益な情報をお届けしたいと考えており、もし誤った情報がございましたら、当ブログまでご一報いただけますと幸いです。

お役に立ったら「ブックマークorシェア」お願いします!

稼ぐノウハウをいち早くGET♪

関連記事

プロフィール

田村です

SEOマーケティングの専門家。元SEO会社出身で現在はフリーランスとして活動中。
専業アフィリエイト1年で月100万円を達成しています。

◆Twitterはじめました↓
@kasegoodnet


詳しいプロフィール

カテゴリー

人気の記事

新着の記事