Font Awesomeの使い方が初心者でもわかる!ダウンロードから設定方法まで


Font Awesomeとはアイコンを文字として扱うこと可能にしたツールです。画像ではなく文字なので、大きさや色などを変更することが可能!ところが説明は英語でかつ、ソースをコピーしてHTMLに書き込むなど、初心者にはなかなか難しいツール。そこで、今回はそんなFont Awesomeの使い方を、初心者でもわかるように簡単に解説してゆきます。

Font Awesomeとは?

icon-home  icon-info-circle  icon-rss  icon-facebook-square  icon-volume-up
Font Awesomeとは、Web上でよく利用される上記のようなアイコンをアイコンフォントという文字として使うことができるツールです。画像ではなく文字なので、大きさ・回転・重ね表示、そして色までも変更することができるという優れもの!もちろん無料で、商用利用も可能です。

Font Awesomeの使い方

では早速、Font Awesomeの使い方をみてゆきましょう。

ダウンロードと設定方法

⑴まずはFont Awesomeのサイトに飛んでください。
【URL】 Font Awesomeのサイトはこちら
FontAwesomeダウンロード画面
⑵ダウンロードをクリックするとこのような画面が出てくるので、下の「just download」のボタンをクリックします。
FontAwesomeのjust downloadダウンロード画面
⑶ダウンロードするとzipファイルが保存されるのでそれを解凍します。
解凍すると、ファイルの中は以下のような構成になっており、このうちcssファイルの中の[font-awesome.min.css]とfontファイルを使用します。
ファイル内容の説明
⑷今回Font Awesomeを利用したいプロジェクトのフォルダ直下に、fontフォルダを入れ、
プロジェクトフォルダの中のcssフォルダの中に[font-awesome.min.css]ファイルを入れてください。
([CSSフォルダ]には[font-awesome.css]と[font-awesome.min.css]の2つのファイルがあり、どちらでも使用可能ですが[font-awesome.min.css]は圧縮されて容量が小さくなっているファイルなので、こちらを使うことをお勧めします。)

⑸次に、今回使用するプロジェクトのHTMLファイルのhead要素に以下のlink要素を書き加えてください。

<head>

<link href="css/font-awesome.min.css" rel="stylesheet">

</head>

これでcssファイルを参照できるようになります。

アイコンが表示されない場合

ファイルを更新して、ローカルでは反映されていたのに、サーバーにアップロードした途端反映されない…
その要因として、ファイルのアップロードの階層を間違えている場合があります。
以下の階層の場所として指示している所にきちんと[font-awesome.min.css]ファイルが入っているかどうか確認しましょう。
<link href="階層の場所/font-awesome.min.css" rel="stylesheet">

アイコンフォントの導入方法

それでは実際にサイト上で、希望のアイコンを表示させる方法についてご説明いたします。
icon選択画面
⑴「Font Awesome」サイト上部メニューの「Icons」をクリック

⑵アイコンフォント一覧が表示されますので、使用したいアイコンフォントをクリックします。
アイコンフォント選択画面

⑶するとアイコンフォントのHTMLソースが出てくるのでこちらをコピーし、
今回アイコンフォントを使用したいと考えているプロジェクトの、HTMLファイルのbody要素の希望の位置にペーストします。
HTMLソース表示画面

<body>

<i class="fa fa-gratipay" aria-hidden="true"></i>

</body>

※「aria-hidden="true"」はあってもなくても問題無し。

どうでしょうか、うまく表示されましたか?
続いて、このアイコンフォントの大きさや色を変える方法について解説してゆきます。

Font Awesomeのカスタマイズ方法

Font Awesomeは予め、サイズやその他諸々の設定ができるようにクラスが指定されているので簡単にカスタマイズできるようになっています。

秘訣は

<i class="fa アイコンクラス設定クラス"></i>

この設定クラスを付け加えるだけである程度のカスタマイズは簡単に行えます。
では、この設定クラスの種類を以下にご紹介してゆきます。

大きさを変える

icon-gittip icon-gittip 
icon-gittip icon-gittip 
icon-gittip icon-gittip 
icon-gittip icon-gittip 

icon-gittip icon-gittip 
大きさのクラスは「fa-lg(約1.33倍)」「fa-2x(2倍)」「fa-3x(3倍)」「fa-4x(4倍)」「fa-5x(5倍)」の5つ用意されています。

これらを先ほどのHTMLソースに以下のように組み込むだけで大きさが変わります。

<i class="fa fa-gratipay fa-5x"></i>

回転させる

icon-spinner
このように回転させたいアイコンの場合は、「fa-spin」を加えるだけでクルクル回りだします。

<i class="fa fa-spinner fa-spin"></i>

重ねる


アイコンの上にアイコンを重ねることができます。
重ねる場合は以下のように「fa-stack」組み込んでください。

上記のアイコンでは、ハートアイコンの上に危険アイコンを二倍にして囲っています。

<span class="fa-stack">
<i class="fa fa-heart"></i>
<i class="fa fa-ban fa-stack-2x"></i>
</span>

※アイコンがずれる、または上手く表示されない場合は、改行を消し、初めの
<span class="fa-stack">の部分に
style="text-align:center"を付け加えて
<span class="fa-stack" style="text-align:center">に変えてみてください。

幅を統一する

アイコンによって横幅が違うため、縦並びにした際ににずれることがあります。
その場合は「fa-fw」を以下のように組み込むだけで揃えることができます。

<i class="fa fa-gratipay fa-fw"></i>

色の設定

icon-gittip  icon-facebook-square  icon-check-square-o
色は予めクラス指定がされていないので自分で用意する必要があります。
まず独自のクラスを作成し、さらにスタイルシート(CSS)で色を指定します。

上記のハートのアイコンは、以下のように「fa-pink」というクラスを作り、[font-awesome.css]にてクラスの設定をしています。
HTML▼

<i class="fa fa-heart fa-pink"></i>

CSS▼

.fa-pink:before
{
color: #ff1493 ;
}

   …カラーコード
*カラーコード検索にはこちらの原色大辞典のサイトが便利です。
【URL】原色大辞典のサイトはこちら
【URL】原色大辞典とは?色見本や色調合からお好みの配色が見つかるツールの使い方!

アイコンフォントをpngに変換

アイコンフォントが一定の環境下で表示されない場合や、Photoshopなどで利用したい場合に使える、アイコンフォントを画像(png形式)に変換する方法をご紹介します。
Font Awesomeのアイコンをpng形式にするためのツールとして「Font Awesome to PNG」というものがあります。
【URL】 Font Awesome to PNGはこちら
Font Awesome to PNGのトップページ
使い方はとても簡単で、下図のようにアイコンクラスを打ち込み、色と大きさを選択して変換ボタンを押すだけ。
Font Awesome to PNGの使い方
⑴アイコンクラスを打ち込む
⑵カラーバーで色を選択
⑶大きさを調整
⑷Generateを押してpngに変換
青いハートの完成図
数十秒で出来てしまうほどのお手軽さ。ぜひご活用ください。

Font Awesomeのライセンスについて

Font Awesomeは商用可能の無料アイコンフォントです。ダウンロードしたCSSファイルにライセンスが予め表記されているので、そのまま使えば特に何もする必要はありません。
【URL】Font Awesomeのライセンス詳細

Font Awesome活用の流れ

⑴Font Awesomeのコードファイルをダウンロードし、利用したいプロジェクトフォルダに入れる
⑵プロジェクトのHTMLファイルのhead要素にlink要素を書き加える
⑶body要素に使用したいアイコンフォントのソースを書き加える
⑷大きさや回転など、各種設定クラスを加える
⑸必要に応じてクラスを独自に作成し、CSSの設定をする
⑹アイコンをpngに変換する時は「Font Awesome to PNG」を用いる

いかがでしたでしょうか?
画像ではなくアイコンフォントを使用することで、ページの表示速度も速くなるのでSEO的にも優れています。ぜひそんな万能アイコンフォントツールFont Awesomeをご活用ください。

以上、初心者向けFont Awesome活用方法でした!

無料でホームページを作れる「ペライチ」

誰でも簡単にホームページ作成を!「ペライチ」

HTMLやCSSでお悩みなら簡単ホームページ作成サービス「ペライチ」におまかせください。
特別な知識は必要ありません。好みのテンプレートを選ぶだけで誰でも簡単にホームページを作ることが出来ます。
誰でも簡単にホームページ作成を!「ペライチ」

初心者でもわかりやすい記事を書いてゆきます!

シェアする

  • このエントリーをはてなブックマークに追加

フォローする