人気アイコンがフォントとして使える! Font Awesomeの登録方法、使い方を解説

ホームページを作成しているときなどに、最近ではヘッダーやフッターなどにSNSのアイコンマークを使用したいといったことがよくあります。

このような場合、Font Awesomeという人気アイコンフォントが使えるサービスを利用すると簡単にSNSアイコンを使用することができ、サイズの変更といったこともすることができるので非常に便利です。

そこで今回は、Font Awesomeの登録方法や基本的な使い方についてを紹介していきたいと思います。

まだ使ったことがない方は、是非登録を済ませて使えるようにしておきましょう。

目次

Font Awesomeとは?

Font Awesomeとは2012年にリリースされたツールで、Web上でよく利用されるアイコンをアイコンフォントとして使うことを可能にしたツールのことを言います。

Font Awesomeにはフリープランとプロプランと2つのプランがありますが、両方のプランで商用利用が可能なので自社のホームページなどに自由に使うことができます。

また、ライセンス表記に関してもフォントファイルなどのファイル内にすでに必要な著作権表記が記載されている為、特に何も追加で書かなければならないことはありません。

引用: Font Awesome公式サイト(https://fontawesome.com/license/free)

なお、2021年5月時点での最新版のバージョンはVersion 5.15.3となっています。

Font Awesomeの登録手順

それではFont Awesomeの登録手順を紹介します。

まずは、以下のリンクよりFont Awesomeの公式サイトを開いて下さい。

Font Awesomeの公式サイトを開く

上の画面が開いたら、Start for Freeをクリックします。

赤枠1番の中にメールアドレスを入力して、Send Kit Codeをクリックします。

ここまでで、上の画面が出ていればOKです。

次に、先ほど登録したメールアドレス宛にFont Awesomeからメールが届いているはずですのでそちらを確認します。

登録したメールアドレス宛には上記のようなメールが届いていると思うので、メールを開き、上の赤枠部分をクリックします。

メールアドレスに記載されていたボタンをクリックするとFont Awesomeアカウントに使用するパスワードを入力する画面が開かれるので、赤枠1番にパスワードを入力し、入力し終わると2番の赤枠部分をクリックします。(赤枠1番にある空欄には2つとも同じパスワードを入力します。)

最後に赤枠1番に基本情報を入力し、赤枠2番をクリックすれば登録は完了です。

なお、登録が完了すると上にあるような登録完了画面が表示されるのですが、上の赤枠で囲った箇所に出てくるコードは「Kit」と呼ばれるコードで、後にFont Awesomeを使用する際に必要となるコードですので、どこかに控えておくようにしましょう。

Font Awesomeの使い方

それではFont Awesomeの使い方を解説していきます。

今回は、下のようなメール送信中のアイコンマークをFont Awesomeを使って表示させたいと思います。

まずは、Font Awesomeのアイコンを表示させたいHTMLファイルを開いて、HTMLファイル内のheadタグの中に以下のコードを記載します。(場所はheadタグ内であればどこでも良いです。)

<script src="https://kit.fontawesome.com/発行されたKitコード.js" crossorigin="anonymous"></script>
<head>
  <meta charset="UTF-8">
  <title>Font Awesomeの登録方法</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://kit.fontawesome.com/発行されたKitコード.js" crossorigin="anonymous"></script>
</head>

上のような感じになっていればOKです。

次に、Font Awesomeのホーム画面の左上にある検索窓で使用したいアイコンを検索するのですが、今回はメール送信中のアイコンを使用したいので、「mail」のような感じで検索して下さい。

なお、Font Awesomeは海外のサービスの為、日本語で検索しても出てこないので、必ず英語で検索するようにしましょう。

検索をクリックすると、検索結果の中から少し下にスクロールした辺りのところに、メール送信中のアイコンが見つかるはずです。

見つかったらこちらをクリックして下さい。

メール送信中のアイコンをクリックすると、上の画面のようにいろいろな情報が書かれているページが表示されます。

ですが、必要な箇所は赤枠で囲ったコードだけです。

こちらのコードをクリックするとコードをコピーすることができるので、赤枠で囲われたコードをクリックしてコピーをして下さい。

<body>
  <h1>メール送信中 <i class="far fa-paper-plane"></i></h1>
</body>

あとは、上のようにアイコンを使用したい箇所に先ほどコピーしたコードをペーストしてあげれば、送信中のアイコンを表示させることができます。

なお、Font Awesomeは先ほども前述した通り、アイコンをアイコン「フォント」として使うツールですので、こちらのアイコンのサイズを変更したり色を変更したい場合は、それぞれfont-sizeプロパティやcolorプロパティといった普段フォントに使用する際に使うプロパティを指定してあげることで、簡単に変更してあげることができます

i{
  font-size: 50px;
  color: green;
}

まとめ

以上、今回はWeb上でよく利用される人気アイコンをアイコンフォントとして使うことを可能にするツール、Font Awesomeの登録方法と基本的な使い方についてをご紹介しました

TwitterやInstagramといったアイコンだけでなく、メール送信中のアイコンやハンバーガメニューのアイコンなど、全部で9000を超えるアイコン(フリープラン: 1609アイコン、プロプラン: 7865)が使用できるようになるので、まだ登録を済ませていない方は是非、登録することをおすすめします。

また、よく使われる使い方の1つに、ulタグなどで作られる箇条書きリストのリストマーカーにFont Awesomeのアイコンを表示させるという使われ方をされることがあるのですが、こちらは別の記事でやり方についてを紹介しているので、気になった方は是非こちらの記事も併せてご覧下さい。

今回の記事は以上になります。

最後までご覧頂き、誠にありがとうございました。

よかったらシェアしてね!

コメント

コメントする

CAPTCHA

目次
閉じる