個人的に役立ったデザイン素材や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アソシエイト・プログラムの参加者です。

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

【保存版】商用利用可!漢字も使える無料の日本語/和文フリーフォント

【保存版】商用利用可!漢字も使える無料の日本語/和文フリーフォント114

フリーフォントを探すのは時間と手間がかかります。 これまでは、必要になったときだけググってフォント

記事を読む

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

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

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

記事を読む

WordPressで格安レンタルサーバーを選ぶなら?エックスサーバーかミニバードがおすすめ!

WordPressにベストな格安レンタルサーバーはこれです!

WordPressでレンタルサーバーを選ぶ場合のおすすめサーバーご紹介します。 新しくWordPr

記事を読む

要チェック!最近公開されたかっこいい無料の英語フリーフォント38(2013.9-2014.2)

要チェックです。 2013年9月〜2014年2月ごろにかけて公開された無料フォントのうち、デザイン

記事を読む

Bootstrapの無料テーマを探すなら一箇所で全部探せる「ThemeFinder」

Bootstrapの無料テーマを探すなら一箇所でまとめて探せる「ThemeFinder」

Bootstrapの無料テーマを探すなら一箇所でまとめて探せる「ThemeFinder」をご紹介しま

記事を読む

CSS3の色名147色(RGB、HEX16進カラーコード併記)

CSS3の色名147色(RGB、HEX16進カラーコード併記)

CSS3になって、色名についても大幅に選択肢が増えたのをご存知でしょうか。 私は知りませんでした。

記事を読む

無料のドメインを取得してレンタルサーバーに設定する方法

無料のドメインを取得してレンタルサーバーに設定する方法

ドメインって無料で取得できるサービスがあるのをご存知でしたか? ドメインというとお名前.comなど

記事を読む

無料で使える角丸・丸文字の英語/欧文フリーフォント

無料で使える角丸・丸文字の英語/欧文フリーフォント28でポップでかわいい演出を

無料で使える角丸・丸文字の英語/欧文フリーフォントのご紹介します。 デザインにポップな印象やかわい

記事を読む

CSS3をお手軽・簡単にするCSS3関連ツール&ジェネレーター43

ベンダープレフィックスを自動で付けられるPrefixrがサービス終了!が後継者「Express Prefixr」現る

ベンダープレフィックスを簡単につけることができるWEBサービスPrefixr。 ところが、このPr

記事を読む

クリックしたくなる!CSSだけで作られた無料のボンタコレクション「CSS Buttons」

クリックしたくなる!CSSだけで作られた無料のボンタコレクション「CSS Buttons」

CSSだけで作られた無料のボタンがコレクションされている便利なサイトをご紹介します。 Photos

記事を読む