レスポンシブのサイトに便利なアイコンフォント

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

今日はアイコンフォントのことについて書きます。最先端の方たちはもう、アイコンフォントの先のSVG画像に注目しているようですが、私は、最先端の方達がいろいろ試して情報が出そろった後に、新しい技術は取り入れています。そんな私が最近、使い時だと思って使っているのがアイコンフォントです。

アイコンフォントとは

アイコンフォントで作ったアイコン

アイコンフォントはアイコンのようなフォントです。キーボードで「音符」打つと♪と変換できますよね。考え方としてはそれに似ています。

これを最近、画像のアイコンの代わりに使っています。

なぜ画像ではなくアイコンフォントを使うかというと、画像のアイコンは、スマホで見たときにぼやけてしまう場合があるのですが、アイコンフォントだとそれがないからです。

地デジのテレビは細かいところまではっきり見えるから毛穴まで見えて女優さんは大変。なんて一昔前にありましたが、パソコンの画面とスマホの画面も、大胆にまとめるとそういう感じで、スマホの画面は高解像度です。

なので、スマホ対応のサイトでは、画像をはっきり表示させるために、大きさの違う2つの画像を用意して、CSSにその記述をして、ということが必要になります。

CSSで設定できない部分はretina.jsで対応しています。いずれにしても2つの画像を用意する必要があります。

アイコンフォントは、画像に見えてフォントなので、どんな環境で見てもぼけません。なので、画像を使うより手間がかかりません。

いろいろなアイコンフォント

Font Awesome
今回の記事に使用しているアイコンフォントです。このブログのヘッダー部分にあるツイッターなどのアイコンでも使っています。
ライセンス:フォントのライセンスとコードのライセンスがあるのでこちらでご確認ください。

Ligatur Symbols
国産のアイコンフォトなので、ミクシィ、ライン、モバゲー、クックバッドなどのアイコンがあります。
ライセンス:SIL Open Font License (OFL)

Web Icon Fonts
こちらも国産のアイコンフォントです。ラインのアイコンは受話器のマークが使いたいというときはこちら。
ライセンス:SIL Open Font License (OFL)

ほかにもいろいろあるので探してみてください。

アイコンフォントを使ってみる

アイコンフォントを使うと、画像を用意せず、アイコンフォントとCSSでいろいろなアイコンが表現できます。(CSSはIE8非対応です。)

icon01

icon02

icon03

詳しくはソースを見てください。Font Awesomeのアイコンフォントを利用しています。

アイコンフォントはダウンロードしたものをサーバーにアップロードして使うのが一般的ですが、Font Awesomeの場合はCDNを利用できるので簡単便利です。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

コメントを残す

*