個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

いまさら聞けない無料のアイコンフォントの導入の仕方・使い方

アイコンフォントを今頃になってようやく使ってみました。
最初は正直よくわからず、戸惑ってしまいましたが、無事に表示することができました。
アイコンフォントは、海外のサービスを利用することが多いため、導入に二の足を踏んでいる方も多いと思います。
ただ、最近はアイコンフォントを利用しているサイトも非常によく見かけるようになりましたし、何より、表示がきれいで、メンテナンスも容易です。
今更感はありますが、実践してみたアイコンフォントの導入の仕方・使い方をご紹介したいと思います。
IcoMoonとFont Awesome Iconsという海外の有名アイコンフォントサービスを使い、HTMLやCSSを使って、アイコンフォントを表示させる方法です。
「アイコンフォントを利用してみたいけど難しいそう」と思っている方々のご参考になれば幸いです。

海外のアイコンフォントサービスを利用する

アイコンフォントはフォントですので、拡大縮小が自由にできます。
retinaだってきれいに表示されます。
フォントなので、cssで色をつけたりもできますよ。
で、実際の利用方法ですが、海外のWEBサービスを利用します。
アイコンフォントを扱っているサービスはたくさんありますが、「IcoMoon」が国内外で評判いいようです。
もう一点、新しいサービスで、「Font Awesome」というものも、とても人気があります。
今回はこの2つを利用したアイコンフォントの使い方をご説明したいと思います。

IcoMoonを使ったアイコンフォント導入の仕方

いまさら聞けないアイコンフォントの導入の仕方・使い方
まずは昔から定評のあるIcoMoonから。
有料版もあります(フォントを自サーバに入れる必要がないなどの特典あり)が、ひとまず無料がいいですよね。
無料版であっても、自分オリジナルのフォントを作成できるスグレモノです。

IcoMoonAPPをクリック

IcoMoonのサイトに行き、画面右上にある「IcoMoonAPP」をクリックします。
いまさら聞けないアイコンフォントの導入の仕方・使い方

好きなアイコンを選ぶ

画面にアイコンがズラリと現れるので、好きなアイコン、導入したいアイコンをクリックして選択していきます。
画面に表示されているものがすべてではなく、画面下にある「Add Icons Fonts Library」をクリックすると、ライブラリーからさらに多様なデザインのアイコンを組み込むことが可能です。
ただし、作者によってライセンスの違いがあるので、ご利用される場合にはご注意ください。
IcoMoon03

Fontsボタンをクリック

アイコンを選択できたら、Fontsボタンをクリックします。
いまさら聞けないアイコンフォントの導入の仕方・使い方
すると画面が切り替わって、Glyphsという見出しの下に、選択したアイコンが表示されます。
Cookieが残っている限り、このリストは削除されません。
ですので、追加し忘れた!という場合でも、のちほど追加できます。
完全に削除したいときには、カーソルをアイコンに合わせると×ボタンが表示されるので、×ボタンを押すとリストから削除されます。
いまさら聞けないアイコンフォントの導入の仕方・使い方

フォント名などを決める

選択したフォントは、自分で名前をつけることも可能です。
画面上の「Preference」というボタンを押すと以下の画面が現れます。
「FontName」の欄に入力すれば、それがフォント名になります。
デフォルトはicomoonとなっています。
IcoMoon00
いまさら聞けないアイコンフォントの導入の仕方・使い方

ダウンロードする

表示されているリストに問題がなければ、画面下にある「Download」ボタンを押します。
IcoMoon08

解凍して自サーバーなどにアップ

ダウンロードしたzipファイルを解凍して中身を確認します。
利用するのは、「fonts」フォルダと、style.cssです。
この2つを、自サーバーなどにアップします。
ただし、style.cssの場合、既存のファイルと名前がかぶる場合があると思うので、fonts-style.cssなどに変えておくといいと思います。
ディレクトリ構成はこのままのほうが、扱いやすいと思います。
いまさら聞けないアイコンフォントの導入の仕方・使い方

head内にアイコン用のcssを読み込む

サーバーにアップしたら、htmlファイルのhead内の、さきほどアップしたアイコン用のcssを読み込んでやります。
ディレクトリを変更した場合は、パスを適宜変更してください。

HTMLで利用する場合

あとはマークアップするだけです。
最初はHTMLで利用してみましょう。
アイコンフォントを利用する場合は、class名やdata要素を利用して表示します。
IcoMoonの場合は、以下のような形でマークアップします。

この表記方法については、さきほどIcoMoonからダウンロードしたフォルダの中に、demo.htmlというものがありまして、その中に記述されています。
それをコピペしました。

それが面倒な場合には、IcoMoonでの作成したいアイコンフォントリストに表示されていた名前を、icon-のあとに記入して、クラス名にしてあげれば表示されます。
いまさら聞けないアイコンフォントの導入の仕方・使い方
また、icon-というプリフィックスは、「Preference」の「icon prefix」にて変更可能です。
IcoMoon00
いまさら聞けないアイコンフォントの導入の仕方・使い方

CSSで利用する場合

CSSでも利用できます。
CSSで利用する場合はまず最初に、ダウンロードしたstyle.cssの中にあった以下の記述を、サイトの装飾用に利用しているcssファイルにコピペしてあげます。

実際にCSSで利用する場合は、以下のような形で利用します。

ここで、\e601という見慣れない数字が出てきます。
これはアイコンフォントに割り当てられたコードです。
このコードによって、表示されるフォントも変わります。
で、このコードはどうすればわかるのかというと、IcoMoonでの作成したいアイコンフォントリストに表示されていた画面の上にあった「U+」というボタンを表示すると、リストの下にコードが表示されます。
IcoMoon12

また、IcoMoonからダウンロードしたフォルダの中にあったstyle.cssのなかにも記述されています。

なお、この数字は自由に変更することが可能です。
画面上の「Codes」というボタンを押せして表示されるウインドで任意の数値を入れれば変更可能です。
次回プロジェクトで、被らない数値でフォントを作りたいなんていうときに便利ですよね。
IcoMoon13
IcoMoon14

IcoMoon

Font Awesomeを使ったアイコンフォント導入の仕方

fontAwesom01
Font Awesomeは、IcoMoonに比べて非常に簡単です。
Font Awesomeのサーバーにあるアイコンフォトをリンクで利用するだけ(IcoMoonの場合は現段階では有料のサービスです)。
お手軽ですよね(ファイルをダウンロードして利用することも可能ですが、今回は省いています)。
しかも、回転、大きさ、サイズ固定、角度などのアイコン表示方法も準備してくださっており、至つくせりです。
Bootstrap、LESS、SASSに対応しています。

headに読み込む

利用にあたっては以下の記述をhtmlのhead内に読み込んであげます。

HTMLで利用する

HTMLで利用する場合には、以下のように記述します。

アイコンに対応するclass名については、Font Awesome Iconsに表示されているアイコンの中から好きなアイコンをクリックすると表示されます。
fontAwesom02
表示されるコードをコピペして利用します。
fontAwesom03

CSSで利用する

基本的な追加は、IcoMoonのときと同じですが、コードが異なるだけです。

フォントのコードは以下の画面に表示されています。
fontAwesom04

簡単ですよね。
アイコンフォントを利用するだけで、驚くほどきれいな印象のサイトに変身するので、まだ利用していないという方はぜひぜひ試してみてください。
Font Awesome

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 3
  • 6

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

無料で使える英語/欧文ステンシルフリーフォント

スタンプのようなクールな英語/欧文フォント!無料ステンシルフリーフォント48

今回ご紹介するステンシルフォントは、欧米で広く使われている「型染め」を模したフォントを指します。

記事を読む

動画にCSSだけで色調補正エフェクトをかけた「dynamically colorize videos」は必見

動画にCSSだけで色調補正エフェクトをかけた「dynamically colorize videos」は必見

動画にCSSだけで色調補正エフェクトをかけた「dynamically colorize videos

記事を読む

フォント名で検索すると使用例のサイトが表示される「FontReach」が便利!

フォント名で検索すると使用例のサイトが表示される「FontReach」が便利!

フォント名で検索すると使用例のサイトが表示される「FontReach」をご紹介。 検索対象は英語/

記事を読む

タイトルや見出しに最適!無料で使える英語/欧文フリーフォント100

タイトルや見出しで活躍する無料の英語/欧文フリーフォント82

タイトルや見出しで活躍する無料の英語/欧文フリーフォントをご紹介します。 私たち日本人が英語/欧文

記事を読む

無料の四角く角張ったフォント=フリースクエアフォント33

無料の四角く角張った英語/欧文フォント=フリースクエアフォント33

無料の四角く角張った英語/欧文フォント=フリースクエアフォントをご紹介します。 スクエアフォントは

記事を読む

これは魅力的!CSSだけで実装できる画像ホバーエフェクト20

これは魅力的!CSSだけで実装できる無料の画像ホバーエフェクト22

CSSだけで実装できる魅力的な画像用のホバーエフェクトをご紹介します。 種類は全部で22種類です。

記事を読む

月額約400円でWindowsリモートデスクトップが使えるVirmach:MT4もサクサク

Windowsリモートデスクトップが月額400円のVirmach:MT4もサクサクだ!

普段はMacをメインに使っており、Windowsが必要なときにはBootCampでWindowsを使

記事を読む

デザインで使えるGoogleフォントをHTML+CSS付きで表示してくれる「TypeSource」

デザインで使えるGoogleフォントをHTML+CSS付きで表示してくれる「TypeSource」

デザインで使えるGoogleフォントをHTML+CSS付きで表示してくれる「TypeSource」を

記事を読む

初心者のためのCSSアニメーションチュートリアル

よくわかる 初心者のためのCSSアニメーションチュートリアル

初心者のためのCSSアニメーションチュートリアルです。 海外の有名ブログでわかりやすいチュートリア

記事を読む

参考にしたい!シンプルで美しいWEBデザイン50(〜2014.02)

2014年2月現在までに公開されているサイトのうち、美しくスッキリしたデザインをコレクションしてみま

記事を読む