『Font Awesome』読み込みも早い！画像を使わずにアイコンを表示できるアイコンフォント

アイコンというものが世の中には存在します。無数にあります。

消費社会の現代において、極度に記号化された様々な”もの”はアイコン化され、存在を簡略化される傾向にあるのです。

 

…と、もったいぶったインテリぶったアホのような前置きはこの程度にして、アイコンフォントについて紹介します。

アイコンフォント

皆さん、ネットでいろんなサイトやブログを見ていると、いろんなアイコンを目にする機会が多いと思います。特にSNS系のソーシャルボタンはアイコンの表示がつきものです。

こんなのよく目にしませんか？

各SNSのアイコンを使用して、ツイートボタンやシェアボタンを表記しているサイトは多いです。SNSが広く認知されたので、いちいち「ツイートするボタンですよ」のような説明を書かなくても、アイコンだけで皆が判断できるようになってきたということでもあります。

そもそも「ツイート」という言葉もツイッター登場当時なら説明が必要だったでしょうね。

アイコンを使うメリット

1. 文字だけで表現するよりも、視覚的にパッと見でわかりやすくなる
2. 見た目が華やかになる
3. 文字を省略してアイコンだけにすることで、スッキリしたデザイン表現が可能
4. 同じく、アイコンのみの表現にすることで省スペース化が実現できる
5. 海外の人が見ても伝わる

このように、アイコンにはいろいろメリットがあるのです。まあ、特に言われるまでもないことかも知れませんね。

なんにせよ、アイコンを使うことには結構いろいろなメリットがあるというわけです。

アイコンを使うデメリット

しかし！ アイコンを使うのにもデメリットはあります。

1. 誰にでも（せめて多くの人に）伝わるアイコンじゃないと意味がない
2. いちいちアイコンを設定するのがめんどう
3. 画像を使うことで読み込み速度が重くなる

こんな感じですね。

１はもう根本的な問題なのでこの際無視します。それにソーシャルボタンのアイコンを使う場合は１は問題ないでしょう。
２も文字だけよりめんどくなくなるのは仕方ないですが、アイコンだけにしてしまえば文字を打つより楽かもしれませんね。

そしてなによりも３！ これは完全に解決することができるのです。

 

Font AwesomeというアイコンWebフォント

実はアイコンだからといって画像を使わなくてはならない…なんてことはないのです。そんなのは旧石器時代の話です。私は旧石器時代が大好きです。嘘です。

とにかく、世の中には「アイコンWebフォント」という素晴らしく便利なものがあるのです！

Font Awesome

上記のサイトがアイコンWebフォント「Font Awesome」のサイトです。

ウェブサイト上では現在様々なアイコンが使われていますが、Font Awesomeはそういった「よく使われそうなアイコン」をWebフォントにし、画像を使わずに使用できるようにしたものです。フォントなので、CSSでサイズや色などを調整でき、なおかつ読み込みも早いという優れものなのです。

大量のアイコン

アイコンの種類が少ないんじゃないの？ なんて心配は無用中の無用です。最近のアップデートだけでも66種ものアイコンが追加されています。

 

すべてのアイコンを合わせると、2015/10/13現在では585種のアイコンがあります。どれも汎用的なものばかりなので、だいたいこれでこと足ります。
ソーシャル系も充実していますが、日本産の「はてなブックマーク」はないので注意。

 

使い方の解説

使い方も難しくはありません。下記のコードをhead要素内に表記すれば準備完了です。

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">

ちなみに「4.4.0」の部分はバージョンなので、「Font Awesome」が更新された際は、都度書き換えないと新しく追加されたフォントは使用できません。
そういう細かいことを置いておけば、とにかく上記コードをコピペしたら準備完了です。

次はFont Awesomeのホームぺージを開き、ズラーっと並んだアイコン一覧から使いたいアイコンを選びます。

ここでは試しにこれを選びます。

Youtubeのアイコンです。ちなみに私もYoutubeで動画を公開していますが、別にYoutuberではありません。映画やCMなどを趣味で撮っているのでそれを公開しているわけです。

さて、私のYoutubeアカウントの宣伝をしたところで次に進みます。アイコンをクリックすると、下記のような画面が開きます。

Youtubeのアイコンがドドーンと出てきました。
そうしたら、次はこれをコピペです。

<code class="html"><span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-youtube-square"</span><span class="nt">></i></span></code>

「fa fa-youtube-square」の部分はアイコンごとに変わります。これをアイコンを表示したいところに貼り付ければ、望みのアイコンが表示されるというわけです。

本当はほかにも色々な表示のさせ方があるのですが、「とにかくアイコンを表示させたいんだ！」というレベルの場合はこれでも十分だと思います。もっと色々とカスタマイズしたい方はこちらのブログが圧倒的に詳しいです。

 

Font Awesomeの使用例

せっかくなので使用例を載せます。

実は私のブログも2015/10/13現在、ソーシャルボタンには「Font Awesome」のアイコンを使用しています。こんな感じです。

ただし、「はてブ」だけは前述の通りアイコンがないので、単純に「B!」というテキストを表示しています。

なんにせよ、いい感じのアイコンです。

 

まとめ

こんな感じで、アイコンを使うと見た目的にも機能的にもよくなるケースは多いので、気になったら試してみてください。

もし使う気はなくても、「Font Awesome」のアイコン一覧を見ていると色んなアイコンがあって見てるだけでも楽しいかも知れません。もし楽しくなかったら、そんなときは是非私のYoutubeアカウントから動画をご覧あれ！

それもつまらなかったらその時は、しゃべくり007でも見てください。

では！

 

シェアする

-カスタマイズ, ブログ   -カスタマイズ, ブログ