Web アイコンフォント 作り方

公開日: : SVG, WEBフォント

画像からSVGを作る

SVG が欠かせないものとして、最近よく使われているのは、アイコンフォントです。
アイコンフォントとは、Webフォントとしてアイコンを表示することです。

アイコンをウェブフォント化すると、色・サイズを自由に出来る為、とても便利です。

オリジナル アイコンフォント 作り方

このサイトのトップページは現状こんな感じです。(未完成だしひどいですが・・)
ARA WEB Site
ここのボタンの部分をアイコンフォントにしてみます。

イラストレーターで SVG 書き出し

イラストレーターで正方形のベクター画像を作ります。
イラストレーター SVG 書き出し

ファイル → 別名で保存 → ファイルの種類をSVG(.SVG)

イラストレーター以外で、画像からSVGを作る

SVGをイラストレーター以外で作るには、Inkscape などいろいろソフトがありますが、SVG はテキストデータなので、ソフトがなくても画像からサクッと書き出す方法はないのか。

探していたところ、ActionScriptのpotraceをJavaScriptに移植したというGeorge.Nagaoka@さんの「Webと文字」記事を見つけました。

更にdefghi1977さんがそれを高速化した「ラスタ画像svg化スクリプト「potrace.js」」があり、そこにpotrace.js もあったので、とりあえず動かしてみました。(なんか2週間以上かかった・・)

ミュシャの絵もこんな感じでラスターのSVGデータにすることが出来ました。
SVG 変換

真ん中の書き出しは、グレースケールで実際のSVGデータは一番右のものなります。IE9・Chromeで確認済みです。

ドラッグアンドドロップで、画像からSVGを作ってダウンロード出来るものが出来ましたので、よかったらどうぞ。
画像からSVGを作る DEMO

defghi1977さんの「ラスタ画像svg化スクリプト「potrace.js」」は細かい設定などもあり、更に、フォント化スクリプトもあってすごいので、ぜひお試しください。

「IcoMoon」のサイトでオリジナルアイコンをウェブフォント化

SVG ファイルが出来たら、次にそれをフォント化します。

フォント化するには、いろんなウェブアイコンのサービスがありますが、有名な「IcoMoon 」でやろうと思います。

左上の ImportIcons ボタンを押して、作成した SVG を選択します(複数可)。
IcoMoon 使い方
Untitled Set の欄にアイコンが表示されますので、使いたいフォントを選択し、下部のFont ボタンを押します。

IcoMoon 使い方
次ページ、下部のFont ボタンを押すとダウンロード出来ます。

ダウンロードしたzipを解答すると、fontsフォルダーには、4つのファイルが入っています。
icomoon.eot
icomoon.svg
icomoon.ttf
icomoon.woff

style.css は以下のようになっています。
fontsフォルダーと、この内容をサイトのCSSに持ってくればもう使えます。

@font-face {
	font-family: 'icomoon';
	src:url('fonts/icomoon.eot?5vgy95');
	src:url('fonts/icomoon.eot?#iefix5vgy95') format('embedded-opentype'),
		url('fonts/icomoon.woff?5vgy95') format('woff'),
		url('fonts/icomoon.ttf?5vgy95') format('truetype'),
		url('fonts/icomoon.svg?5vgy95#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-about:before {
	content: "\e600";
}
.icon-blog:before {
	content: "\e601";
}
.icon-home:before {
	content: "\e602";
}
.icon-mail:before {
	content: "\e603";
}
.icon-work:before {
	content: "\e604";
}

出来たものを設置すると、このような感じになりました。
ARA WEB Site
手書き風のこのアイコンが欲しい方は、(いないかもしれませんが、)一応デモからダウンロード出来ますので、よかったらどうぞ。
DEMO を見る

関連記事

Web フォント とは?

WEBフォントとは? 意図するフォントを表示する技術 Webブラウザは端末にインストールされ

記事を読む

日本語対応の オープンソースの美しい フォント Noto Sans CJK が出来たらしい

日本語対応の オープンソースの美しい フォント Noto Sans CJK が出来たらしい

Google Earth が出来た時も、Google ストリートビューが出来た時も、 Google

記事を読む

背景を SVG で全面表示し、パターン化をアニメーションさせる

背景を SVG で全面表示し、パターン化をアニメーションさせる

SVGでウィンドウに全面表示させた空に、シャボン玉が飛んでいるような表現をしてみようと思います。

記事を読む

SVGとは?

SVGとは? SVG(Scalable Vector Graphics)は、XMLをベースとした、

記事を読む

SVG WEBフォント

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

wordpress タイトルの変更
WordPress タイトルの変更

テンプレートタグ the_title(); get_the_title

All-in-One WP Migration で サーバ移動
「All-in-One WP Migration」プラグインで 簡単に WordPress のサーバー移行する手順メモ

1.移行元サイトでのデータエクスポート 「All-in-One WP

DNSサーバーとは
ドメインとは?DNSサーバーとは?

ドメインとは? ドメインとは? ドメインとは、インターネット上のネ

javascriptで複数同じ名前のformの値を取得する
javascriptで複数同じ名前のformの値を取得するとエラー Cannot read property ‘value’ of undefined

Javascript で value の値を取得する このようなHT

リビジョンを削除し、テーブルを最適化してDBの容量を削減
WordPress リビジョンを削除し、テーブルを最適化してDBの容量を削減

WordPress リビジョン機能 リビジョンは過去の記事を保存して

→もっと見る

    • 202110
      Mon Tue Wed Thu Fri Sat Sun
      123
      45678910
      11121314151617
      18192021222324
      25262728293031
    にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ WordPressへ
    にほんブログ村 FC2 Blog Ranking
    PAGE TOP ↑