カテゴリ:

オリジナルでWebアイコンフォントを作成してみた!

どうも!こんにちは。
お寿司のネタでは、「サーモンが一番好き」な押尾です。

最近、仕事でよく使うようになった「Webアイコンフォント」important_devices
サイト制作やシステムのモック画面の作成にとーっても便利なのでちょっと調べてみました★

そもそもWebアイコンフォントとは?

Webアイコンフォントとは、「WEBフォントにテキストではなく、アイコンを表示させたもの」。
フォントなのでCSSでサイズを変更したり、カラーを自由に変更したりすることが簡単にできます。

Webアイコンフォントのメリット

アイコンをPNGやJPGで作成した場合、色を変更したいな。っとなった時、元データのカラーをわざわざ変更しないといけなかったりして少し面倒。。。
さらに、カラーが複数あった場合、そのカラー分だけ画像が必要!
さらにさらに!画像を拡大しようものなら画像がぼやけてちょっと残念な感じになりますね。

smiley
32×32
smiley
80×80

でも、Webアイコンフォントなら拡大してもそのままで変わらずに使用することができるのです。
フォントなのでもちろんCSSでカラーを設定すれば簡単に色を変更できます。

face
ノーマル
face
拡大!!
facefaceface
facefaceface
レインボー!!

thumb_upメリットまとめ

  • フォントなのでテキストとのベースラインが合わせやすい
  • フォントなので拡大縮小はcssのfont-sizeで指定出来る
  • フォントなのでcssで簡単に色を変えられる
  • ベクターデータなので背景色があるときなどのエッジの処理を気にしなくていい。

Webアイコンフォントのデメリット

最強無敵のWebアイコンフォントですが、デメリットもあります。

thumb_downデメリットまとめ

  • 単一の画像よりは一度に複数のアイコンデータを読み込むので、データ量が多くなる(重くなる)
  • 一部のブラウザでうまく表示されない時がある

オリジナルでWebアイコンフォントを作ってみる

そう!デメリットの「一度に複数のアイコンデータを読み込む」=「余計なアイコンフォントも読み込んでる」というならば、「必要な分だけアイコンフォントを読み込めばいい」わけですね。

そこでせっかくなので、自分でオリジナルのアイコンフォントを作成してみました。

アイコンフォントジェネレータを使ってSigniteメンバーのアイコンを作ってみた!

今回使用したサイトは以下のサイトです。

Let’s アイコンフォント作成!

1.SVGデータのアイコンを用意する。

今回はブログのサムネイルをAIのライブペイント機能でSGVデータにしてみました!

701_04

2.アイコンをインポートする。

サイトの「Import Icon」ボタンからアイコンデータをアップロードします。

flow01 スクリーンショット 2016-03-20 0.59.49

3.ダウンロードしたいアイコンを選択する。

自分がアップロードしたアイコン以外にもサイトにアップされているデフォルトのアイコンを自由に選択して一緒にダウンロードすることができます。

flow_02

4.アイコンに名前をつけてダウンロードする。

「Generate Font」ボタンをクリックすると選択したアイコンの名前を自由に変更できます。
オリジナルで作成したアイコンは分かりやすい名前にしてみました。

701_01

ダウンロード!!

701_02

5.サイトに読み込んで使用する。

早速使用してみましょう!

表示に必要なのは「style.css」と「font」フォルダ内のフォントファイル4つです。
ファイルをサーバにアップしたらCSSファイルを読み込みます。

701_03

設置したい箇所に以下のソースを記載します。
<span class="icon icon-アイコン名"></span>

できました〜★

皆さんも自分だけのオリジナルアイコンフォントを作成して実際に利用してみてくださいね〜

よく使うWebアイコンフォント

最近よく使用しているWebアイコンフォントをご紹介。

material_icon

Material icons

https://fontello.com/

The following two tabs change content below.
kayoko oshio
技術開発部 ディレクター いつでもポジティブに物事を考えよう!と、思いつつ、時々ダークサイドに堕ちて暗黒世界へのトラベルを楽しんでいます。 お問い合わせはこちらからお気軽にどうぞ。

おすすめの記事

    【2019年4月】Facebook の QR コードを表示する方法
    【2019年4月】Facebook の QR コードを表示する方法
    知ってました? Googleマップの新機能。
    知ってました? Googleマップの新機能。
    今話題の Android 乗っ取り危機から身を守る!?
    今話題の Android 乗っ取り危機から身を守る!?
    続・FacebookでQRコードを表示する方法
    続・FacebookでQRコードを表示する方法
    AIの未来を考えると非常に恐ろしくなる?
    AIの未来を考えると非常に恐ろしくなる?
    モバイルで写真の切り抜き。Adobe Photoshop Mix を使ってみた。
    モバイルで写真の切り抜き。Adobe Photoshop Mix を使ってみた。