アイコンフォントについての備忘録

  • Posted on
  • Category : Tips
アイコンフォントについての備忘録

デザインとの相性や使いたいものが同セットになっているかなど少しでも選択肢は多い方が良いので、ダウンロードできるサイトを見つけてはメモしていたのですが、結構な数になってきたのでそれらの整理も兼ねたアイコンフォントについての備忘録です。

有償だけど高品質で種類も豊富みたいなセットもあったりするんですが、今回は基本的にフリーで使用できるもので、国内外合わせると全部で34サイトまとめています。
また、アイコンフォントの使用方法についても簡単にですが紹介するので、まだ使ったことがないけど実装したいという場合はそちらを参考にしてみてください。

アイコンフォントについての備忘録 目次

  1. アイコンフォントについて
  2. 使用方法
  3. 海外のアイコンフォントセット
  4. 国内のアイコンフォントセット

1. アイコンフォントについて

レスポンシブWebデザインが広まったなどをきっかけに、多くのサイトやブログでも取り入れられているのを見かけるようになったアイコンフォント。
実際に使用したことがある人ならわかると思いますが、本当に手軽に実装できて且つメリットもいろいろとあるので、今後も更に見かけることが多くなってくるかと思います。

メリット・デメリット

アイコンフォントのメリットとしては代表的なもので以下がよく挙げられています。

  • 画像に比べて軽量
  • 高解像度デバイスなどでも綺麗に表示ができる
  • CSSのみでサイズやカラー変更など可能で、CSS3を使えばシャドウやアニメーションなども容易にできる

正直画像に比べて軽量かどうかはサイズや量などにもよりますし、場合によっては画像より表示が重くなったりとデメリットになる可能性もありますが、どのデバイスでも劣化せずに綺麗に表示できるのとCSSで容易にスタイル変更できるという部分は大きいと思います。

ただ、先述したようにメリットだけでなくデメリットな部分も幾つかあります…。

例えば、これはアイコンフォントの種類にもよりますが、フォントがスムーズにダウンロードされなかった場合は意味不明な文字列だけが出てきてしまうことがあったり、IEなど一部のブラウザでは表示させるために少し手を加える必要があることもあるので、それらを予め考慮した上で導入する必要があります。

目次へ

2. 使用方法

CSS

@font-face {
	font-family: 'fontName';
	src: url('../font/fontName.eot');
	src: url('../font/fontName.eot?#iefix') format('embedded-opentype'),
		 url('../font/fontName.woff') format('woff'),
		 url('../font/fontName.ttf') format('truetype'),
		 url('../font/fontName.svg#webfont') format('svg');
}

上記のようにCSSへ記述することでアイコンフォントを使用できるようになります。
赤字部分は使用するフォント名や自身の使用環境に併せて変更してください。
上記をコピーして使用しても問題ないですが、配布サイトによってはダウンロードした際にデモ用のHTMLやCSSが同梱されているものもあるので、そちらからコピー・参考にすることもできます。

使用方法 – Fontelloの場合

例として、以下でTwitterアイコンを「Fontello」のアイコンフォントを使用して実装する方法を紹介します。

アイコンを表示させる方法としては<i class="icon-hoge"></i><i class="icon-hoge">hoge</i>のようにアイコンを表示させるための要素をHTMLに記述するというのもありますが、個人的にこの方法は好きではないので、今回は普段から自分がよく使っている表示させたい要素にクラスを指定して、そこに:beforecontentを用いて表示する方法になります。
先述したi要素を使う方法で実装したいという場合は以下の方法を少しいじってもできますが、手っ取り早く知りたい場合はFontelloからフォントをダウンロードした際に同梱されているデモの記述を参考にしてください。

Fontelloにアクセスしてセット内に含めたいアイコンを選択

まずは「Fontello」にアクセスしてセット内に含めたいアイコンを選択します。
使用したいアイコンをクリックすると画像のように選択された状態になります。
(今回は沢山ある中からFont AwesomeのTwitterアイコンを選択しています)

「Customize Codes」のタブを選択して、コードを任意のものへ変更

使用したいアイコンを選択後、そのままページ右上にある「Download webfont」からフォントセットをダウンロードして使用することもできますが、「Customize Names」や「Customize Codes」のタブを選択すれば、それぞれ選んだアイコンに任意で名前やコードを指定することができます。
今回はコードを任意で変更したいので「Customize Codes」のタブを選択してわかりやすいようにTwitterの頭文字である「t」を指定し、あとはページ右上にある「Download webfont」のボタンからファイルをダウンロードします。

ダウンロードしたフォントを任意の箇所に格納(今回の例ではfont内に格納しています)し、次に下記をHTMLとCSSにそれぞれ記述します。
ダウンロードした際に同梱されているdemo.htmlにはアイコンを表示したい箇所に<i class="icon-twitter"></i>を記述するという形を用いて実装していますが、下記はそれとは少し違う実装方法になります。

HTML

<p class="twitter">Twitter</p>

CSS

@font-face {
	font-family: 'fontello';
	src: url('../font/fontello.eot');
	src: url('../font/fontello.eot?#iefix') format('embedded-opentype'),
		 url('../font/fontello.woff') format('woff'),
		 url('../font/fontello.ttf') format('truetype'),
		 url('../font/fontello.svg#webfont') format('svg');
}

.twitter:before {
	font-family: 'fontello';
	content: 't';
	margin-right: .3em;
	color: #00acee;
}

@font-faceを指定後、class="twitter"に対してfont-familyとFontelloでコードとして設定した「t」をcontentにそれぞれ記述しています。

Twitterのアイコンが表示される

上記を記述後、問題なければ画像のようにTwitterという文字列の横にアイコンが出ているのを確認できると思います。
もっとアイコンを大きくしたければCSSにfont-sizeを追記したり、マウスオンした時にアイコンが回転するとか動きをつけたければtransitiontransformなど使って簡単に動きも付けられます。

目次へ

3. 海外のアイコンフォントセット

「Fontello」や「Font Awesome」などは多くのブログなどでも紹介されているように汎用性高いアイコンが多くて使いやすいので、自分もよく利用させてもらっています。(このブログのアイコンも「Fontello」を使用しています)
他にも丸みを帯びた可愛らしい「Batch」や「Typicons」、手書き風の「Handy Icons」、プログラミング関連やSNS・Webサービスのロゴなどが集まった「Pictonic」などもあります。

また「Fontello」「Fontastic」「IcoMoon」など、サイトの中には自分が作成したSVGをアップロードできるものもあり、それらを利用すればオリジナルのフォントセットを作成することも容易にできます。

※使用する際は再度ライセンス等を各自で確認してください。

Fontello – icon fonts generator

Fontello - icon fonts generator

Font Awesome

Font Awesome

IcoMoon

IcoMoon

The Elegant Icon Font

The Elegant Icon Font

Foundation Icon Fonts 3

Foundation Icon Fonts 3

Foundation Icon Fonts 2

Foundation Icon Fonts 2

Genericons

Genericons

WebHostingHub Glyphs

WebHostingHub Glyphs

Shock Icon Font

Shock Icon Font

80 Mini Icons

80 Mini Icons

Metro UI CSS

Metro UI CSS

Iconic Icon Set

Iconic Icon Set

MFG Labs icon set

MFG Labs icon set

Elusive-Icons Webfont

Elusive-Icons Webfont

Raphaël Icon-Set via @font-face

Raphaël Icon-Set via @font-face

The Noun Project

The Noun Project

Entypo

Entypo

Modern Pictograms

Modern Pictograms

Sosa

Sosa

Batch

Batch

Typicons

Typicons

OpenWeb Icons… a font!

OpenWeb Icons... a font!

Mono Social Icons Font

Mono Social Icons Font

Pictonic

Pictonic

Handy Icons

Handy Icons

Handy Icons Vol2

Handy Icons Vol2

We Love Icon Fonts

We Love Icon Fonts

Fontastic

Fontastic

目次へ

4. 国内のアイコンフォントセット

変わったものが数多くある「絵文字フォント – EmojiSymbols Font」、リガチャ文字で使用できる「Ligature Symbols」、他にもはてブやmixiといった国内ソーシャルのアイコンが用意されている国内ならではのフォントセットもあります。
また、使い方やライセンスなども日本語なので確認もしやすいです。
以下で紹介している中で「スタンプフォント!」は現在まだWebフォントを提供していませんが、近日公開予定ということですので紹介させてもらいました。

※使用する際は再度ライセンス等を各自で確認してください。

Ligature Symbols

Ligature Symbols

Web Icon Fonts

Web Icon Fonts

CONDENSE-iconFont

CONDENSE-iconFont

Free Web Icon Font – PomoCon –

Free Web Icon Font - PomoCon -

絵文字フォント – EmojiSymbols Font

絵文字フォント - EmojiSymbols Font

スタンプフォント!

スタンプフォント!

目次へ

Back to Top

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。