ITTI STAFF
BLOG

イッティWEBスタッフの制作ブログ

アイコンフォントを使うフォントだけにするとかなり便利

複数のアイコンフォントから、使用するフォントだけのフォントセットを作って使用します。使えるフォントアイコンも増えて、ファイルサイズも抑えることができます。

Font Awesomeや、Entypoなどのアイコンフォントは使わないフォントも多いので、使用するフォントだけでフォントセットを作って使います。

フォントセットを作るメリット

  • ファイルサイズが少なくなる。
  • Font AwesomeやEntypoなど、複数のアイコンフォントから好きなフォントを選択してフォントセットが作れる。
  • 作業効率があがる。
  • SVGファイルも生成してくれる。

IcoMoonでフォントセットを作る

フォントセットが作れるサイトはいくつかありますが、「IcoMoon」が気に入っています。

使いたいフォントを選択

使いたいフォントを選択していきます。

icomoon-flow01

使いたいアイコンフォントを選ぶ時はフッターの「Add Icons From Library…」から、アイコンフォントを選べます。

20以上のアイコンフォントが用意されています。

icomoon-cap

使用するフォントを選択したら、SVG またはFontどちらかを選んでダウンロードします。
今回は「Font」をダンロードします。

icomoon-flow03

ダウンロードファイルの中身

Fontファイル(ttf、woff、eot、svg)のほか、選択したフォントを使用したdemo.htmlが同梱されています。

icomoon-set

このdemo.htmlを表示させると、アイコン名や、CSSで使う文字コードが記載されています。便利ですね。

icomoon-set-demo

アイコンフォントを使う準備

使うファイルは「fonts」フォルダと、style.cssです。

CSSのlinkタグを設定します。

ページのhead要素内に、CSSのlinkタグを設定します。
サンプルでは「css」ディレクトリに移動させて、style.cssを「font-style.css」にリネームして記述しています。

サンプル

[html]
<link rel="stylesheet" href="css/font-style.css">
[/html]

font-style.cssを「css」ディレクトリに移動させているので、font-style.cssのfontリンク先を変更します。

サンプル

[html]
src:url(‘../fonts/icomoon.eot?w2ltft’);
src:url(‘../fonts/icomoon.eot?#iefixw2ltft’) format(‘embedded-opentype’),
url(‘../fonts/icomoon.woff?w2ltft’) format(‘woff’),
url(‘../fonts/icomoon.ttf?w2ltft’) format(‘truetype’),
url(‘../fonts/icomoon.svg?w2ltft#icomoon’) format(‘svg’);
[/html]

このあたりは、ウェブサイトの構築内容に合わせて適宜変更して下さい。

Font AwesomeのCSSを少し追加

Font AwesomeのCSSを追加すると、Font Awesomeで使っている「fa-2x(フォントサイズ2倍)」などのCSSが利用できます。
アイコンフォントを使い慣れている人は、使いやすくなるかと思います。(CSSはMIT Licenseなので大丈夫だよね?)

[html]

.fa-lg {
font-size: 1.33333333em;
line-height: 0.75em;
vertical-align: -15%;
}
.fa-2x {
font-size: 2em;
}
.fa-3x {
font-size: 3em;
}
その他、お好みでCSSを追加。

[/html]

アイコンフォントを使う

アイコンとして手早く使ってみます。
class=”icon-phone”と記載すると電話アイコンが表示されます。
aria-labelは、画像のaltと同様の属性でスクリーンリーダーが何のアイコンかを読み上げてくれます。

サンプル

[html]
<i class="icon-phone" aria-label="電話番号"></i>03-1234-5678
[/html]

アイコンをグルグル回転させる

classにfa-spinを追加させることで、アイコンをグルグル回転させます。

[html]
<i class="icon-phone fa-spin" aria-label="電話番号"></i>
[/html]

アイコンの幅を揃える

アイコンによってサイズが異なりますが、fa-fwを追加することで幅が揃います。

[html]
<i class="icon-home fa-fw" aria-label="ホームへ"></i>
<i class="icon-phone fa-fw" aria-label="電話番号"></i>
[/html]

リストアイコンとして使う

ul要素にfa-ulを記述し、li要素にfa-liを記述します。

[html]
<ul class="fa-ul">
<i class="icon-home fa-li" aria-label="ホームへ"></i>
<i class="icon-phone fa-li" aria-label="電話番号"></i>
</ul>
[/html]

CSSの擬似要素で使う

CSSの擬似要素を使って表示させます。ただし、古いIEのバージョンでは表示されません。
font-familyはicomoonとなります。

HTML

[html]

<div class="tel-icon">電話番号</div>

[/html]

CSS

[html]

.tel-icon:before {
font-family:icomoon;
content:"\e600";
}

[/html]

Font Awesome以外のアイコンフォントも使えるし、ファイルサイズも抑えることもできるのでかなり便利です。

新しい記事

東京のWEB制作会社イッティ