最先端のWebマーケティングを発信するメディア

最先端のWebマーケティングを発信するメディア
アイコン

Font Awesomeの使い方と表示されないときの対処法

最終更新日:
SHARE
FacebookTwitterLineHatenaShare

サイトを制作していてSNSのシェアボタンを設置する際など、各SNSのアイコンを使用したいと考えることはないでしょうか。シェアボタンの視認性が高まれば、コンテンツがSNSで拡散されやすくなり、多くの人の目に留まることにつながります。

いざ、自身でボタンを作るとなると難しいと感じてしまうかもしれませんが、「Font Awesome(フォントオーサム)」に登録すれば簡単にアイコンを利用することができ、サイトのデザインに合わせて色を変えたり、サイズを変更したりするといったことも行えます。

Font Awesomeの基本的な使い方やアイコンのカスタム方法、表示されない場合の対処法などを紹介します。

Font Awesomeとは

Font AwesomeはSNSのアイコンをはじめとした、web上で使用されている様々なアイコンを、アイコンフォントという文字として利用することができるツールです。アイコンフォントは画像データと違いベクター形式で保存されるため、サイズを変更しても粗くなることはありません。また、CSSを設定するだけで色やサイズ、アニメーションを付けるといったことも可能です。

Font Awesomeにはフリープラン(無料版)とプロプラン(有料版)の2つのプランがあります。有料版の料金は99ドル(年間)です。どちらのプランも商用利用が可能なので、ビジネスで使用する場合はフリープランでも問題ありません。無料版と有料版の大きな違いは使用できるアイコンの数で、Font Awesome には全部で7,865個のアイコンが存在しますが、無料版で使用できるのは1,609個までです(2021年8月時点)。

最新バージョン「Font Awesome 6」のベータ版がリリースされ、オリジナルで作成したアイコンも使用できるようになりました。アップロードするだけで、他のアイコンと同じように扱うことができます。ただし、「Font Awesome 6」は2021年8月時点でプロプラン会員のみが利用できることになっています。

Font Awesomeでは、アイコンのライセンス表記はフォントファイル内などに記載されているので、追加で表示する必要がありません。無料で簡単に有名アプリやサービスのアイコンを扱えるということも含めて、サイト制作が初めてという方にもおすすめのツールといえます。

Font Awesomeの登録方法、使用前の準備

Font Awesomeを利用するには、会員登録と準備の2つを行う必要があります。

会員登録

Font Awesomeの公式サイトにアクセスします。
Font Awesomeでは以前、CDN(コンテンツ・デリバリー・ネットワーク)から、ユーザー同士が利用できるURLをコピーして、アイコンフォントを使用することができましたが、現在では会員登録が必要です。CDNとはサーバー上にあるファイルを使用する仕組みのことで、これによりファイルを自身のパソコンにダウンロードせずにアイコンを使用することができました。
Font Awesome
会員登録はトップページの「Start for Free」から行うことができます。最初から有料プランを使用したい場合は、「Get More with Pro」を選択しましょう。
Font Awesome
次にメールアドレスを入力し「Send Kit Code」を選択します。メールが送られてくるので、そこからセットアップのページに移り、パスワードを入力すれば会員登録は完了です。

コードの貼り付け

Font Awesome
会員登録が完了すると「Add Your Kit's Code to a Project」とユーザー固有番号が表示されます。このコードをコピーして、自身のサイトの<head>〜</head>の間に埋め込みましょう。これで事前準備も完了です。

Font Awesomeの使い方

Font Awesomeでアイコンを使用するには、Kitコードを利用する方法、CDNコードを利用する方法、ファイルをダウンロードする方法の3つがあります。

Kitコードを利用する場合は、先ほどの説明で事前準備が完了しているのでここでは説明を省略します。

CDNコードを利用する方法

CDNコードはHTMLにタグを貼り付けるだけなので簡単に行うことができます。新しいアイコンが追加されてもダウンロードをする必要はありませんが、CDNコードのバージョン数値を書き替えないと使用できないので注意が必要です。

こちらにアクセスして(ログインして)最新のコードをコピーします。次にコードを<head>〜</head>の間に埋め込みます。これで完了です。

ファイルをダウンロードする方法

こちらにアクセスして必要なファイルをダウンロードします。
Font Awesome
ページ内にある「Download Font Awesome Free for the Web」を選択します。ダウンロードした中からCSSフォルダ内にあるall.min.cssとwebfontsをサーバーのCSSディレクトリなどに設置します。同じ階層に合わせて設置するようにしてください。次にall.min.cssを<head>〜</head>の間に埋め込んだら完了です。

アイコンを使用する方法

アイコン
サイト上部にあるメニューバーから「Icons」を選択すると、使用できるアイコンが一覧表示されるので、その中から任意のアイコンを選択します。英語で検索して使いたいアイコンを探すことも可能です。
コード
アイコンが表示されたら、画像上部にあるコードをコピーします。このコードを<body>〜</body>の間に埋め込むと、アイコンが表示されるようになります。

アイコンの加工方法

ここからは、コードを変更するだけでアイコンに様々な変化を付け加える方法を紹介します。加工に必要なコードは、<i class〜にあるアイコン名の後に入力すると使用することができます。

大きさの変更

「fa-xs(0.75倍)」「fa-2x(2倍)」のように入力すれば変更することができます。

<i class="fab fa-500px fa-xs "></i>

下記が主な倍率です。
fa-xs:0.75倍
fa-sm:0.875倍
fs-lg:1.33倍(vertical-align: -25%が指定されるため下部に表示される)
fa-2x:2倍
fa-3x:3倍
fa-4x:4倍
fa-5x:5倍

アニメーションを付ける(回転)

「fa-spin」または「fa-pulse」を入力すればアイコンを回転させることができます。「fa-spin」は通常の滑らかな回転、「fa-pulse」は8ステップかけて回転します。

<i class="fab fa-500px fa-spin "></i>
<i class="fab fa-500px fa-pulse "></i>

色を付ける

色はCSSを指定するだけで変更することができます。

HTML
<i class="fab fa-500px fa-black"></i>

CSS
.fa-500px{
color:#000000

角度を変える

「fa-rotate-90(90度)」、「fa-rotate-180(180度)」のように、fa-rotateと回転させる角度数を入力すればアイコンの角度を変えることができます。水平方向や垂直方向に変えることも可能です。

<i class="fab fa-500px fa-rotate-90 "></i>

下記は主な例です。
fa-rotate-90:90度回転
fa-rotate-180:180度回転
fa-rotate-270:270度回転
fa-flip-horizontal:水平方向に回転
fa-flip-vertical:垂直方向に回転

アイコンが表示されない場合の対処方法

CDNコードが正しく貼れていない

CDNコードを使用する場合、<head>〜</head>の間に正しく埋め込まれていなければなりません。コードが正しいかどうか、また最新のバージョンになっているかを確認しましょう。

フリープラン会員なのに有料のアイコンを使用している

先ほども説明したように、フリープランでは使用できるアイコンに制限があります。無料会員でもプロプラン会員のみ利用できるアイコンのコードを貼ることができますが、使用することはできません。アイコンの表示でグレーになっているものは有料版なので使用を避けるようにしましょう。

font-familyが正しく指定されていない

font-familyとは、サイト上に表示するフォントを指定するコードです。Font Awesomeのアイコンでは、無料版と有料版で埋め込むコードが異なるので注意が必要です。アイコンの基本コードは下記の通りです(ver.5の場合)。

.icon::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f000";
}

今回記載した「font-family: "Font Awesome 5 Free";」は無料版を利用する際の表記であり、有料版を使用する際は「font-family: "Font Awesome 5 Pro"」と指定しなければいけません。

WordPressでCocoon テーマを使用している

WordPressの無料テーマである「Cocoon」には標準でFont Awesomeの機能が備わっており、最初から設定を行うことなく利用することができます。ただし、バージョンが4になっているため、最新版に変更する必要があります。

バージョンの変更はWordPressの管理画面左にあるメニューバーの「Cocoon 設定」を選択します。設定画面が表示されたらタブの中から「全体」を選択します。次の画面内に「サイトアイコンフォント」という項目があるので、ver.5を利用する場合は「Font Awesome 5」にチェックを入れます。最後に「変更をまとめて保存」を選択したら完了です。

ユニークなアイコンをサイト上に設置できる

Font Awesomeには様々なアイコンがあり、制作中のサイトのメニューボタンに利用すれば、ユーザーにその内容を感覚的に伝えることができるでしょう。うまく配置すれば、個性的なサイトを作り上げることもできます。

アイコンはよく使われるSNSのシェアボタンだけでなく、あらゆる用途で使用することができます。無料版でも使えるアイコンはたくさんあるので、サイトに変化をつけたい場合はFont Awesomeを使用してみてはいかがでしょうか。

SHARE
FacebookTwitterLineHatenaShare

この記事を書いた人

RYUICHI ARAI
神奈川県出身。いきなりフリーランスとしてキャリアをスタートさせ、スポーツ関連の記事を執筆。過去にはHIPHOPライターとしても活動。ライター 以外にもコンテンツ制作や編集などの仕事も行う。趣味はフィールドワーク。

UPDATE 更新情報

  • ALL
  • ARTICLE
  • MOVIE
  • FEATURE
  • DOCUMENT