カスタマイズ ブログ

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

icons-873314_1280

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

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

 

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

スポンサーリンク

アイコンフォント

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

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

キャプチャキャプチャキャプチャ

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

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

アイコンを使うメリット

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

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

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

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

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

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

こんな感じですね。

1はもう根本的な問題なのでこの際無視します。それにソーシャルボタンのアイコンを使う場合は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でも見てください。

では!

 



読者登録お願いします

ついについに…! 第二の目標20人に到達!!
ちょっと満足してしまいましたが、まだまだ多くの人に読んでいただきたいので、次の目標をどうするか考えることとします。


紅葉葉 秀秀逸プロフィール

▼この記事を書いた人
”紅葉葉 秀秀逸”というイマイチな名前を名乗る管理人です。月間18万PVまで来ました。
作曲・自主映画・ゲーム制作ととりあえず色々やる人。働きながらやってます。
座右の銘:「ラー油の上」 年齢:鳥

真面目なプロフィール・お問い合わせ
こんなことやってきました


この記事が気に入ったら
いいね!で最新記事をチェック

新着記事を配信中

Twitterで回転オトエフミを

更新情報のプッシュ通知を受け取る



シェアする

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


おすすめ記事

1
ドラクエ5パパスの「ぬわーーっっ!!」がリメイク版でしれっと激しくなってた件を徹底考察

「ぬわー」 これを聞けば全日本人の70%は一瞬でなんのことかわかるだろう。 &n ...

2
グルメチェーン店レビュー超まとめ!【寿司、とんかつ、ラーメン…】

腹減ってますか? 減ってない方、これから減りますよ。私は減りました。 &nbsp ...

3
自主制作映画の作り方&体験談総まとめ!【無料素材・編集ソフト・ロケ地…】

上の中二病的な画像は、私が撮っている自主映画のワンシーンです。低予算、少人数でプ ...