WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： JQ
カテゴリー： デザイン >フォント

みなさんは最近、多くのサイトで使われはじめた「アイコンフォント」というものをご存知でしょうか。

例えば上記の赤枠で囲ったような、ボタンやファイル名の前に付いているような、イメージで直感的に分かるようにした図形のフォントです。

このアイコンフォントは、パソコンにフォントがインストールされていなくても、表示することの出来る「Webフォント」の一種です。

何が便利なのか

アイコンフォントは、既にさまざまな種類のものが公開されており、いろいろな図を作成する手間を削減することが出来ます。
さらに先ほどもご紹介したとおり、このアイコンフォントはWebフォントの一種なので、あくまで文字として扱われます。そのため、画像とは違い、どれだけ拡大しても画質が荒れないという特徴があります。
PCサイトだけではなく、最近のスマートフォンの高精細なディスプレイにも、簡単に対応することができます。

アイコンフォントを手軽に使える「FontAwesome」

先ほど、アイコンフォントはとても便利だとお伝えしましたが、導入するために手間がかかってしまっては、せっかく削減した図作成の作業時間も無駄になってしまいます。

そこで、現在最もメジャーと言ってもいい、大変簡単に導入することが出来るアイコンフォント「FontAwesome」をご紹介します。

FontAwesomeの導入方法

この「FontAwesome」というサイトは、現在479種類のさまざまなアイコンを提供している超有名なアイコンフォントサイトです。

何通りか導入する方法はあるのですが、ここでは最も簡単な方法をご紹介します。

1.CSSを読み込む
使用したいページで専用CSSを読み込みます。CSSも下記の通り、インターネット上のCSSを読み込みます。そのためダウンロードする必要はありません。

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

2.タグを挿入する

例えば、このようなチェックマークを使いたい場合は、挿入したい場所に下記のようなコードを書きます。

<i class="fa fa-check"></i>

これだけです。とても簡単です。
チェックマーク以外に他のアイコンを使用したい場合は、FontAwesomeのアイコン一覧ページを参考にして下さい。

まとめ

このように簡単に導入できるアイコンフォント。
メリットは前述した以外にも、文字なので色をCSSで簡単に変更できたりもします。
特に高精細なディスプレイになってきているスマホサイトでの利用が、かなり効果が高いのではないかと思います。

みなさんもぜひ一度、導入してみてはいかがでしょうか。
では次回も、よろしくお願いいたします。