便利なフリーアイコンフォント「Font Awesome」の使い方・・・基本実装をヌルッと解説!

font-awsome

フリーのアイコンフォントのパッケージとして2012,3年頃から話題を集めるようになった「Font Awesome」。2017年にバージョンアップしたFontAwesome5をリリースし、有料版も用意され、5000近くのアイコンフォントを使用することができます。フリーで使用できるアイコンフォントだけでも吹き出しやテレフォンなどのchat系から世にあるsnsを総じて集めたものまで多彩で、超便利なWebサービスです。今回は、そんな「Font Awesome」について基本的な実装方法をヌルっと解説していきます。

Font Awesome アイコンを利用する為の準備

Font Awesomeとはweb上でよく利用されるアイコンフォントの一群をひとつのパッケージとして利用可能にしたウェブサービスです。利用するためにはパッケージごとダウンロードして自分のサーバーに設置するか、Font Awesomeが提供するCDNを利用することになりますが、ここではCDNでの利用を説明していきます。

ここでいうCDNとはコンテンツを多くのヒトに利用してもらう為にコンテンツ提供側が準備してくれているウェブ上の空間です。Font Awesomeを利用する準備として、まず自分のサイトのヘッダー内に準備してくれている空間へのリンクを設定することになります。

Font Awesome4以前

Font Awesomeはもともとbootstrap用に開発されたアイコンフォントが分離される形で開発されたものなので初期のFont AwesomeはbootstrapのCDNを利用します。サイトのヘッダー内に下のようにCDNへのリンクを設置します。

Font Awesome5以降

Font Awesome5以降もバージョン4と同じようにヘッダー内に下のようにリングタグを追加します。

最新のバージョンは以下のページで確認できます。

Start I Font Awesome

link tagを<head>~</head>の中にコピペしてください。svgも選択できますが設置方法が変わってきます。情報量が多くなります。記事をシンプルにしたいのでここでは割愛し、別途記事にしたいと思います。

Font Awesome 基本の使い方

Font Awesome 基本の使い方はhtmlの中に直接タグを書き込む方法と疑似要素(before)としてcssの中に指定するやり方の二つになります。

html内にタグを書き込む方法

下記リンク先でアイコンを選択しクリックします。

バージョン4以前

バージョン5以降

font awsome adress card

<i class></i>をコピーしてhtml内の任意の場所に貼り付けます。

Hello it’s me

「fa-3x」などの要素をタグ内に追加すると、アイコンサイズを変更できます。

fa-xs .75em
fa-sm .875em
fa-lg 1.33em (vertical-align: -25%)
fa-2x~fa-10x 2em~10em

アイコンサイズはcssでも変更可能です。

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

Font Awesomeは::afterや::beforeのどcssの擬似要素を使用して表示することもできます。

Font Awesome

cssファイル内に「クラス名::before」と記入し、その “contents” プロパティーにFont Awesome 赤下線部のUnicodeをコピペします。”/”(バックスラッシュ)を書き忘れると表示されないので注意してください。

font-familyに “Font Awesome 5 Free” を指定します。

font-weightに900を指定します。400以下を指定した場合は、白抜きの表示になります。

アイコンと文字を縦中央に揃えたい場合は、「address-cardクラス」に ”vertical-align: middle;” を指定して下さい。

Hello it’s me

アイコンの色の設定

htmlタグ、擬似要素での指定、どちらの方法もcssで色指定することができます。

Font Awesome チョコっとだけ応用

Font Awesomeは追加のclass要素を指定したりなどで、いろいろ応用できます。その中で普通の実装で利用しそうなものを取り上げたいと思います。

アイコンを回転させる

ローディングアニメーションで使用するような、アイコンを回転させる為のクラスをFont Awesome側で用意しています。classにfa-spinを追加するだけで機能します。 fa-pulseを追加すると、8ステップで1回転するアニメーションとなります。

擬似要素での指定でアイコンを回転させる実装を、他ではあまり紹介していないようなので簡単に書いてみました。少し適当なので、参考まででよろしくお願いします。

Hello it’s me

アイコンを重ねる

Font Awesomeはいくつかのサポートスタイルがバンドルされています。アイコンを積み重ねる為の “fa-stack” もその1つです。<i>タグの親要素のクラスに”fa-stack” を追加します。stackとは積み重ねるを意味します。背面側のclassに “fa-stack-2x” 前面側classに “fa-stack-1x” と “fa-inverse” をそれぞれ追加します。 “fa-inverse” を追加するとノックアウト(抜き、切り抜き)効果が得られます。

Unicodeを複数使用する

Font Awesomeで使用するUnicodeは複数指定することもできますし、元来のUnicodeも一緒に使用できます。

Baby in!

ベビーとベビーカーがFont Awesomeで矢印とスペースは普通のUnicodeです。Unicodeって普通にホームページ制作する時にもポイント変えるのに使えたりするので覚えておくと便利です。ただし環境によっては表示されない時もあるので気おつけてご使用下さい。

Font Awesome まとめ

アイコン制作って簡単なように見えるかもしれないけど、以外と難しい。ひとつなら良いけど複数で時間とびとびで制作しようとすると雰囲気が揃わなくなってくることもしばしば。このお仕事は時間がとれない時もあるので、Font Awesomeのような便利なサービスを積極的に利用するのも良い方法だと思います。それではまた。

0

コメントして下さい

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です