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

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

無料のファイル転送ツールの決定版?容量無制限・件数無制限・ハイスピードの「Infinit」

ファイルを転送するとき、どんなツールを利用していますか? DropBoxやFireStorageな

記事を読む

Googleフォントを使った組み合わせを次々提案してくれる「Font Flame」

Googleフォントを使った組み合わせを次々提案してくれる「Font Flame」

Googleフォントを使った組み合わせを次々提案してくれる「Font Flame」。 提案された組

記事を読む

アイコンフォントはもはや常識!アイコンフォントを無料で利用できるサービス ベスト10

アイコンフォントはもはや常識!アイコンフォントを無料で利用できるサービス ベスト10

好きなアイコンだけを選んでオリジナルのアイコンフォントにできる無料のサービスをまとめてご紹介します。

記事を読む

CSSだけでブルブル震えるエフェクトを簡単実装!CSS Shakeを使ってみた

CSSだけでブルブル震えるエフェクトを簡単実装!CSS Shakeを使ってみた

CSSだけでブルブル震えるエフェクトを簡単実装!CSS shakeを使ってみた すでにお気づき

記事を読む

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

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

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

記事を読む

SVGベースのオリジナルなシームレスパターンを作ってダウンロードできる「Plain Pattern」

SVGベースのオリジナルなシームレスパターンを作ってダウンロードできる「Plain Pattern」

今回ご紹介するのはSVGベースのシームレスパターンを簡単につくれて、PNG形式でダウンロードできてし

記事を読む

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

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

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

記事を読む

欧文/英語フォントがよくわかる!欧文/英語フォントの実例付きサイト「Fonts In Use」

必見!欧文/英語フォントがよくわかる欧文/英語フォントの実例付きサイト「Fonts In Use」

欧文/英語フォントの実例付きサイトご紹介します。 実例数、実に5346!  ものすごい数です。

記事を読む

かっこ良くて様になる!商用無料で使える欧文/英語フリーWEBフォント54選

かっこ良くて様になる!商用無料で使える欧文/英語フリーWEBフォント54選

WEBフォントは便利で美しいから大好きです。 欧文のWEBフォントはGoogle Fontsをはじ

記事を読む

これは便利!背景画像に使えるシームレスパターンを無料でコピー/ダウンロードできる「Transparent Textures」

こりゃ便利!というサービスがあったのでご紹介します。 WEBサイトを制作するときに背景画像などに利

記事を読む