web-dev-qa-db-ja.com

Twitter bootstrap 3-カスタムグリフィコンを作成し、グリフィコン「フォント」に追加

Twitter bootstrap3を実行していますが、アイコンをフォントとして処理する新しい方法に非常に満足しています。ただし、カスタムアイコンが必要です。自分で作成し、理想的には既存のフォントに統合する必要があります。運よく検索しました。イラストレーター、ベクターグラフィックスなどはよく知っていますが、どのように統合するのですか?

最悪の場合のシナリオでは、従来の方法で画像を作成しますが、より良い解決策があることを願っています。


カスタムグリフィコンを既存の(ブートストラップ3)グリフィコンフォントと統合するにはどうすればよいですか?

62
benteh

このプロセスは1つのオプションです。

IcoMoon App を使用できます。 library にはFontAwesomeが含まれており、クイックスタートが可能です。または、グリフィコンをダウンロードしてfontawesome-webfont.svgをアップロードします。

カスタムアイコンについては、SVGを作成し、IcoMoonにアップロードしてFontAwesome/Glyphiconセットに追加します。

終了したら、フォントセットをエクスポートし、アイコンフォントと同様にロードします。

幸運を!

UPDATE

Iconmoom.appにインポートした後、インポートしたSVGファイルのアイコンがずれているように見える場合は、まずWebページで使用したときの実際の外観を確認します。プレビューは必ずしも完璧ではないようです。または、iconmoon.appツールバーに編集アイコンがあり、移動およびサイズ変更ができます。

82
David Taiaroa

誰かがここで言及されたものに代わるツールを探しているなら、私は Glyphter が非常に有用であることがわかりました。それはかなり簡単で、.svgファイルをアップロードしてグルーミングし、他のいくつかのフォントパックからグリフを追加することができます。その後、バンドル全体を独自のフォントとしてダウンロードできます。

1
MattMakes