「icoMoon」自作アイコンもwebフォントにできる無料サービス

icoMoon
webサイトで使えるフォントアイコンのサービスって色々あるよね。でも自分で作ったアイコンをフォントアイコンとして使いたいんだけど…
それなら「icoMoon」というサービスがピッタリ!自分で作ったアイコンを、簡単にフォントアイコンにできるサービスだよ。もちろん無料で使えるフォントアイコンもたくさんあるよ。

「icoMoon」とは、webフォントアイコンが無料で使えるサービス。フォントアイコンとは、画像とは違ってフォントとして使えるアイコン素材です。文字と同じようにサイズや色を変更できるので便利。「icoMoon」では、自分で作ったアイコンも簡単にフォントアイコンにできるサービスなんです。

この記事では、「icoMoon」の使い方を詳しく解説していきます。

icoMoonの魅力

「icoMoon」の魅力とはどのような点があるのでしょうか。

  • フォントアイコンが無料で使える
  • オリジナルのフォントアイコンが作れる
  • 様々なデザインのフォントアイコンがある

アイコン素材のダウンロード

使いたいアイコンを探す

以下のリンクより、icoMoonのサイトにアクセスします。

https://icomoon.io/

画面右上の「icoMoon App」をクリックし、アイコン一覧画面に移ります。

ボタンをクリック

アイコン一覧が出てくるので、使いたいアイコンをクリックします。一度にたくさんのアイコンを選択することができます。選択解除したい場合は、選択しているアイコンをもう一度クリックしましょう。

アイコンを選択

アイコンをダウンロード

使いたいアイコンを全て選択したら、画面右下の「Generate Font」をクリックします。

アイコンのダウンロード

「Generate Font」をクリックすると、選択したアイコンの一覧が表示されます。ここで、アイコンの名前を変更することができます。CSSのクラス名にもなるので、わかりやすい名前に変更しておきましょう。

クラス名の変更

アイコンにホバーをすると表示される「Get Code」をクリックすると、HTMLやCSSでの使用例のコードも確認することができます。

コードの知識がなくても、見本のコードが表示されるから便利だね!
直接コピーすることができるから、そのまま自分のwebサイトで使うと間違えることもないよ。

コードの確認

画面右下の「Download」をクリックすると、フォントファイルが入った「icomoon.zip」フォルダがダウンロードされます。

アイコンをダウンロード

webサイトでの使い方

ダウンロードしたアイコン素材を、webサイトで使う方法を説明します。

必要なファイルをアップロード

ダウンロードしたzipフォルダを解凍すると、以下のようなファイルが入っています。このうち、「fonts」フォルダと「style.css」ファイルの2つを使用します。

icomoonフォルダ

この2つを、webサイトがあるサーバーのディレクトリにアップロードすれば、webサイトでアイコンが使えるようになります。

アイコン素材の追加

icoMoonでは、他にも様々なデザインのアイコンを使うことができます。画面左上の本のアイコン、「Icon Library」をクリックします。

アイコンの追加

「Icon Library」をクリックすると、様々なデザインのアイコンのパックが表示されます。使いたいアイコンパックがあれば、「+ Add」をクリックしましょう。すると、アイコン一覧画面に追加したアイコンが表示されます。

アイコンの追加

オリジナルアイコンをフォントアイコンにするには

icoMoonでは、自分で作ったオリジナルアイコンをフォントアイコンにすることができます。フォントアイコンにしたい画像を、SVG形式で保存しておきます。そして、icoMoonサイトの左上「Import Icons」をクリックします。すると自分のパソコンのフォルダが開くので、作成したSVGファイルを選択しましょう。

アイコンをインポートする

すると、アイコン一覧画面に追加したアイコンが表示されます。

オリジナルアイコンの追加

これで、フォントアイコンとして使用することができます。他のフォントアイコンと同じように、ファイルをダウンロードしてwebサイトで使用してください。

自分で作ったアイコンを、フォントアイコンとしてwebサイトで使えるようになるのはいいね!
文字と同じように、フォントとして扱えるから便利だよね。自分で作ったアイコンじゃなくても、SVG形式の画像ならフォントアイコンにできるよ。商用利用できるかなどのライセンスを確認して使うようにしようね。

icoMoonのまとめ

「icoMoon」の使い方を解説しました。無料で使えるアイコンフォントがたくさんある、便利なサービスです。自分で作ったアイコンやSVG形式の画像をフォントアイコンにすることもできるので便利ですね。オリジナルアイコンを使って、オリジナリティ溢れるwebサイトを作りましょう!

投稿者:

コメントを残す

メールアドレスが公開されることはありません。