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

いまさら聞けない無料でオリジナルなアイコンフォントを作る方法・利用する方法

オリジナルなアイコンフォントの作り方・使い方

アイコンフォントは便利だ、という声をあちこちで耳します。
遅ればせながら私も使ってみましたが、本当に便利でした。
そしてキレイです。
既存のアイコンを使ったアイコンフォントの利用の仕方は「いまさら聞けないアイコンフォントの導入の仕方・使い方」をご覧いただくとして、今回はオリジナルなアイコンフォントをつくって利用する方法です。
Illustratorと海外のIcoMoonを利用すれば、いとも簡単に作成できてしまいますよ。
「オリジナルのアイコンフォントをつくってみたいけど難しいそう」と思っている方々のご参考になれば幸いです。

SVGファイルをIllustratorで作成する

素材を準備します。
今回は当ブログのロゴを使用してみました。
いまさら聞けないオリジナルなアイコンフォントの作り方・使い方
Illustratorでアイコンフォント化したいデータを作成し、「ファイル」>「別名で保存」>「SVG」を選択して「保存」>SVGプロファイル「SVG1.1」で作成します。
なお、作成するときには、アートボードをアイコンがちょうど表示される枠に設定しておくとよいようです。
originalicon02

オリジナルなアイコンフォントを海外のアイコンフォントサービスIcoMoonを利用してつくる

存在の準備ができたら、アイコンフォント化です。
オリジナルなアイコンフォントをつくる場合も前回の同様、IcoMoonを利用します。
いまさら聞けないアイコンフォントの導入の仕方・使い方

IcoMoonAPPをクリック

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

Import Iconsをクリック

画面に左上にある「Import Icons」をクリックして、さきほど作成したSVGファイルを読み込みます。
いまさら聞けないオリジナルなアイコンフォントの作り方・使い方

Fontsボタンをクリック

読み込みが完了したら、最上部にオリジナルのアイコンが表示されますので選択します。
アイコンを選択できたら、Fontsボタンをクリックします。
いまさら聞けないオリジナルなアイコンフォントの作り方・使い方

リストに追加される

読み込みが完了すると、画面が以下のように切り替わり、リストに追加されます。
いまさら聞けないオリジナルなアイコンフォントの作り方・使い方

IcoMoon上で微調整が可能

読み込んだファイルは、IcoMoon上で微調整が可能です。
回転、拡大縮小、リフレクト、表示位置などを設定することができます。
微調整する場合には、リストに表示されているアイコンをクリックすると、以下の画面が現れますので、ここで調整します。
originalicon06

フォント名などを決める

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

ダウンロードする

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

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

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

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

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

HTMLで利用する場合

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

オリジナルのアイコンフォントの場合、名前はファイル名が引き継がれます。
そのファイル名に、icon-というプリフィックスがついた形でclass名が決定されています。
icon-というプリフィックスは、「Preference」の「icon prefix」にて変更可能です。
originalicon07
いまさら聞けないアイコンフォントの導入の仕方・使い方

CSSで利用する場合

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

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

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

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

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

いかがでしょうか。
IcoMoonがあれば、オリジナルなロゴであっても簡単にアイコンフォト化できてしまうのです。
楽しいですし、便利ですし、キレイですし、使用しない手はないですよね。

IcoMoon

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

  • 0
  • 0
  • 2
  • 7

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

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

トップ固定でレスポンシブ対応のナビゲーション/メニューを簡単に実装できる「Fixed Nav」

トップ固定で、レスポンシブ対応のナビゲーションが増えていますね。 これだけ増えてくると、トップ固定

記事を読む

無料で使えるテクノ/クリスタルフリー英語フォント90+

SFやクラブ関係、最先端・近未来的なテーマなどにマッチしそうなフォントといえばテクノフォントまたの名

記事を読む

グラフィックデザイナーのためのオンラインポートフォリオ作成方法

グラフィックデザイナーの皆さんはオンラインポートフォリオをもっていらっしゃいますか? 持っていない

記事を読む

WEBサイトの必要な部分だけを印刷したいならコレが超便利!ブックマークレット「The Printliminator」

WEBサイトの必要な部分だけを印刷したいならコレが超便利!ブックマークレット「The Printliminator」

WEBサイトの必要な部分だけを印刷したい場合に大変便利なブックマークレットをご紹介。 このブックマ

記事を読む

オリジナルな英語・欧文フォントを一瞬でつくれてしまう「modulator」

オリジナルな英語・欧文フォントを一瞬でつくれてしまう「modulator」

怖いほど簡単に、オリジナルの英語・欧文フォントを作れてしまうサービスをご紹介します。 作成できるの

記事を読む

商用無料!デザイナーが選ぶミニマルデザインにマッチする無料の英語・欧文フリーフォント ベスト57

商用無料!デザイナーが選ぶミニマルデザインにマッチする無料の英語・欧文フリーフォント ベスト57

ミニマルデザインにマッチするデザイナーが選んだフリーの英語・欧文フォントをご紹介します。 ミニマル

記事を読む

インパクト大!Gmailに一瞬にしてGIFアニメーションを添付できるChrome機能拡張「Gmail GifLine」

インパクト大!Gmailに一瞬にしてGIFアニメーションを添付できるChrome機能拡張「Gmail GifLine」

Gmailに一瞬にしてGIFアニメーションを添付できるChrome機能拡張をご紹介します。 メール

記事を読む

Googleフォントをフル活用!Googleフォントをさらに見つけやすく使いやすくするサービス9

Googleフォントのオススメがすぐわかる!Googleフォントを見つけやすく使いやすくするサービス10

GoogleフォントのオススメがすぐわかるGoogleフォントを見つけやすく使いやすくするサービスを

記事を読む

CSSアニメーションを使ったエフェクトライブラー9

CSSアニメーションを使ったエフェクトライブラリー9

CSSアニメーションを使ったエフェクトは、プログラムを苦手とするWEBデザイナーや一般の方々に新しい

記事を読む

CSSだけで作られた決済代行・クレジット決済サービスアイコン95種「PaymentFont」WEBフォントしても使える!

CSSだけで作られた決済代行・クレジット決済サービスの無料アイコン95種「PaymentFont」WEBフォントしても使える!

CSSだけで作られた決済代行・クレジット決済サービスの無料アイコンセットをご紹介します。 ピュアC

記事を読む