WEB制作をしているとアイコンをサイト内で使う機会は多いのではないでしょうか。アイコンですが、画像をしようしてデザイン、コーディングをしても問題はありませんが、あまりそのやり方はおすすめできません。

本記事ではWEB制作に置いて、アイコンを使用する際に役に立つ「Font Awesome」というのをご紹介したいと思います。

「Font Awesome」とは

Font Awesomeとは、商用利用が可能で、自身のWebサイトやアプリケーション、WordやPDFなどのドキュメントにも埋め込めるWebアイコンフォントです。

Webアイコンフォントなので、画像とは違い、拡大しても粗くなることはなく、色やサイズなどを簡単に変えることができます。

アイコンを画像で読み込んでしまうと、画質が悪くなったり、ちょっとした修正に時間がかかったりとあまり使い勝手がいいとは言えません。

Font Awesomeの無料版と有料版の違い

Font Awesomeのサイトに行くと無料版と有料版があるかと思います。
基本的には無料版でも有料版でも商用利用ができて、Webサイトやドキュメント内での使用が可能です。

大きな違いとしては使えるフォントの数です。サイトに行くとわかるかと思いますが、無料版だと使えないフォントはグレーアウトしているかと思います。

これらのフォントは有料版でしか使用できないということです。
しかし私のこれまでの経験上、Webサイト制作で使用するフォントは無料版で使えるもので事足りています。

特にこだわりがないのであれば、無料で使えるフォントをどんどん使うようにしましょう。

Font Awesomeを使う

それではFont Awesomeを実際に使用していきましょう。ここで紹介するのは

• デザインカンプで使用する方法
• Webサイト(html/css)に使用する方法

です。
それでは実際に使用していきましょう。

デザインカンプで使用する

デザインカンプ、またはドキュメントで使用するにはPCにフォントをインストールする必要があります。
※インストール部分はMac OSでの手順になりますので、あらかじめご了承ください。

Font Awesomeのダウンロード

では早速公式ページからダウンロードしていきましょう。

フォントをダウンロード

.ttfをPCにインストール

ダウンロードするとファイル内に「webfonts」というフォルダがあるので、その中の.ttfの拡張子のもの3つをダブルクリックでインストールしていきましょう。

• fa-brands-400.ttf
• fa-regular-400.ttf
• fa-solid-900.ttf

コピペして使う

PCにFont Awesomeが入ればあとは使うのは簡単です。

例えばTwitterのアイコンを使いたかったら公式サイトの該当ページにアクセスし、上部に並んでいるTwitterのアイコンをクリックします。

これであとはデザインカンプを作るのに使用しているソフト(私はXDを使用しています。)にペーストします。

フォントをFont Awesomeにしていないと文字化けした感じになるので、フォントをしっかりと指定してあげます。

フォントのタイプ選び

Font Awesomeにはフォントタイプが大きく2つあります。「Font Awesome 5 Brands」と「Font Awesome 5 Free」です。

「Font Awesome 5 Brands」はTwitterやFacebook、Instagramなどのブランド系のアイコンです。それ以外のアイコンは「Font Awesome 5 Free」です。

Webサイト(html/css)に使用する方法

続いてはWebサイト(html/css)に使用する方法について解説していきます。

Font Awesomeを読み込む

Font Awesomeを読み込むためにCDNとサーバーにアップする方法があるのですが、ここではCDNを使用した方法で解説していきます。

CDNで読み込む方法ですが、下記サイトのLoad All Styles箇所の〜をタグ内にコピーします。

コードをコピー

これでサイト内でFont Awesomeを使う準備ができました。

HTMLにコードを貼り付ける

続いて使用したいアイコンのコードをコピペします。該当サイトのiタグの部分をクリックしてコピーして、それをHTML内にペーストしましょう。これでうまく表示されます。

うまく表示されない場合

たまに□でうまく表示されない場合があります。その際はCSSでfont-familyを指定してあげます。

• font-family: “Font Awesome 5 Free”;

と記述してあげましょう。

それでも表示されない場合はfont-weightを指定します。400か900を指定してあげましょう。

• font-weight: 900;

と記述してあげます。

まとめ

いかがでしたでしょうか？Web制作でアイコンを使う方法を紹介させていただきました。

デザインカンプ、コーディングで使用する方法はWeb制作をするなら必ず覚えておく必要があるので、これを機にぜひ覚えてください。

株式会社Esolabでは Webフォントなどを存分に使用して、スピーディーに制作を行なっております。

ホームページ制作をお考えの方は一度弊社お問い合わせフォームよりお問い合わせください。