2012-04-20 13 views
11

Webアプリケーションで使用するためのアイコンフォントを作成したいと思います。 fontAwesome、Iconic、fontomasは私がやりたいことの例ですが、カスタムアイコンを使用する必要があります。どこから始めたらいいか分からない。どんな助けもありがとうございます。アイコンフォントを作成するツール

答えて

10

Inkscapeは、ベクターを使ってグラフィックを作成するのに最適なアプリケーションです(現代のフォントはどのようなもので作られていますか)。

FontForgeは、フォントを作成するのに便利なアプリケーションで、インクフリースケープからSVG(偉大なフリーベクターグラフィックフォーマット)をインポートできます。

+0

FontForgeは非常によく働きました。それはかなり簡単に醸造を使用してインストールすることができました。ありがとう。 – Rob

+0

自作が不正行為をしている、これはあなたの恒久的な記録に行く! :p – reisio

1

ロブ、start hereです。

これは最善の例ではなく、そのテンプレートが少し古くなっています。あなたのフォントのベースラインに応じてキャンバスの周りにアイコンを移動して実験しなければなりません。

long postもあります。彼はベクトルをFontLabにインポートします。 FontLabの欠点は649ドルの価格で、学習曲線はInkscapeよりも急です。私はFontLabがOS Xのインストールにバグがあることも発見しました。サイドノートでは

:narkeesoが言ったことにもかかわらず

誰かがこのタスク専用のソフトウェアを作成する必要があります...

2

、フォントは一つだけのベースラインを持っています。一貫性を持たせるためには、すべてのアイコンがその行に表示されている必要があります。一部のアイコンフォントはアイコンを垂直方向にセンタリングしようとしますが、これは解決するよりも多くの問題を引き起こし、vertical-alignプロパティを使用して周囲の文字を基準にアイコンの垂直方向の位置を調整できます。

私はその記事のテンプレートのベースラインを強くテストしました。これはブラウザ間で非常に成功しています。ただし、X-heightとArialのような共通フォントを一致させることもできます。これはFont Squirrelコンバータで行うことができます。

17

あなたはすでにそれを見ていない場合は、私のWebアプリを使用すると、アイコンフォントを生成する助けることができるが:http://icomoon.io/app

あなたがあなた自身のSVGsをインポートする、またはアイコンのフォントライブラリを閲覧することができます:http://icomoon.io/app/#library

+1

このアプリは本当に便利でよく実行されます。簡単にSVGをインポートし、CSSを自動生成してフォントを書き出します。 – taudep

+0

このアプリは素晴らしいです! – Bema

+0

なぜアプリで128x128 svg/pngを生成できないのですか? –

1

IVEが使用されてフォントを作成するためにグリフ(http://www.glyphsapp.com/)と呼ばれるアプリケーションがあり、最近はウェブ用のアイコンフォントを使用しています。ブートストラップに付属しているグリフコンをインポートして、使用したメトリックを確認しました。だから、20pxでfontsize theydはグリッドに一番合っている。

添付されたユニコードを持つすべてのクラスを作成するCSSファイルをエクスポートするカスタムスクリプトがあります。カスタムグリフにUnicode値をasignesし、別のPythonスクリプト(一部のアイコンは、カメラ、ベル、及びそのようなもののように、実際にユニコードの一部である)

その後私は、Webフォント変換カントーのフォントリスを使用する必要があり、 I彼がwebfontの輸出を実行していると言った開発者と連絡を取り合っています。アップデートは無料ですが、彼はまだ直接Webfontの輸出を含んでいません。 だから、常にフォントをアプリからブラウザに取り込むのは面倒なことだ。

しかし、私は確かにいくつかの要素を合理化しています。

fontlabはユーザーフレンドリーではありません。私はその理由だけでなく、価格を主にお勧めします。グリフはアイコン生成に必要な機能をカバーする40€のミニバージョンを提供します。