カスタマイズ ブログ

『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でも見てください。

では!

 

スポンサーリンク

     スポンサーリンク

スポンサーリンク

     スポンサーリンク

この記事がよかったら
いいね!しよう

新着記事を呆然と配信中

呆然としたい人はTwitterで回転オトエフミを…

↓ついでに回転オトエフミ制作の…

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

 ●紅葉葉 秀秀逸
 ブログ管理人。90分の自主映画を作り、音楽も全編作曲する程の創作好きです。
 趣味:筆記体を投げ倒す、座右の銘:「ラー油の上」、年齢:鳥


        

真面目なプロフィール・お問い合わせ

ぶっとびアクション映画『抜本-BAPPON-』公開中

【当ブログ制作の”本で戦う”新感覚アクションムービー公開中】
少子化で滅亡の危機に瀕した日本を、本で戦い本で救う、爽快バカアクション!
本編はこちら

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


おすすめ記事

1
短文強烈堀井節!ドラクエシリーズの全名言を楽しめる「ただのしかばね」のような記事

  ドラクエを愛する人は世に数多く、ドラクエをまあまあ好きな人も数多い ...

2
和幸!松乃屋!とんかつチェーン店の違いって?[ランキング付き・随時更新]【三文】

とんかつリミッターが外れている三文享楽です。   なんでか? それはこ ...

3
奥深すぎ!? コンソメとは一体…その由来の謎に迫る!【完成されしポタージュ】

  コンソメパンチ。   「ポテトチップはコンソメ味が美味し ...