無料ツールでSVG画像をアイコンフォントに変換する方法(サイトロゴをフォント化してみる)

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

以前、簡単ロゴメーカー「Design Rails」でサイトのロゴを作ってみました。

無料でロゴ作成するなら「Design Rails」がお手軽
先日、外注2万円でWordpressテーマのロゴを作ってもらいました。 やっぱりさすがプロです。良いものを作っていただ...

そのとき、ジェネレートされたロゴファイルの中にSVGがあったので、ロゴSVGからアイコンフォントを試しに作ってみました。

今回は、そのとき行った「SVG→アイコンフォント」の変換方法の紹介です。

photo by Ahmed Bin-Baz

スポンサーリンク
レクタングル(大)広告

SVGをアイコンフォントにする手順

変換する主な手順としては、以下のようになります。

  1. SVGファイルを用意する(今回はDesign Railsで作った)
  2. IcoMoonでSVGファイルを読み込む
  3. フォント用の調整
  4. アイコンフォントを生成する

今回の方法は、無料で使えるアイコンフォントジェネレーターのIcoMoonを利用した方法です。IcoMoonを利用すれば、結構簡単にアイコンフォントを作成できます。

SVGファイルを用意する

とりあえず、今回は、サイトロゴをアイコンフォント化するために以下の方法でSVGファイルを作成しました。

無料でロゴ作成するなら「Design Rails」がお手軽
先日、外注2万円でWordpressテーマのロゴを作ってもらいました。 やっぱりさすがプロです。良いものを作っていただ...

作成されたSVGファイルはこんな感じです。

ロゴのSVGファイル

今回は、このSVGをアイコンフォントにしたいと思います。

もし、いろいろな色を使ったロゴだったとしてもアイコンフォントにすると単色化されます。

画像からSVGファイルを作成したい場合は、以下の方法を使って無料ソフトでも作成することができます。

自作のWEBアイコンフォントの作り方(無料ツールのみでfeedlyフォントを作る)
最近は、その便利さからWEBアイコンフォント(以下、アイコンフォント)を利用したサイトが増えています。 アイコンフォントは、CSSで色...

IcoMoonでSVGファイルを読み込む

次にIcoMoonに移動して「Import Icons」ボタンからSVGファイルを読み込みます。

SVGファイルのインポート1

SVGファイルをインポートすると、以下のように表示されるので、「①インポートしたロゴを選択」し、「②Generate Fontをクリックしてフォントを生成」します。

インポートされたロゴを選択して生成ボタンを押す

フォント用の調整

「Generate Font」ボタンを押すと、以下のような画面になるので、フォント名を変更します。

アイコンフォントの名前を付ける

今回は、サイトのロゴなので「site-logo」と付けてみました。

アイコン部分をクリックすると、調整画面が表示されるので、大きさや位置を変更したい場合は調整をします。

アイコンフォントの調整をする

アイコンフォントを生成する

調整が済んだら、右下のほうにある「Download」ボタンを押してファイルをダウンロードします。

サイトロゴアイコンフォントをダウンロードする

すると「icomoon.zip」というファイルがダウンロードされます。

IcoMoon.zip

これで、SVGファイルからアイコンフォントの作成が完了しました。とても簡単です。

IcoMoonで作成したアイコンフォントの使い方

あとは、IcoMoonで作成したアイコンフォントのWordpressでの使い方を一応説明しておきます。

アイコンフォントファイルの設置

先程ダウンロードした「icomoon.zip」を回答して、フォルダ名を「logo-icon」とでもしておきます。

logo-icon

このフォルダをテーマ(子テーマ)フォルダ直下にコピーします。

テンプレートファイルから呼び出す

あとは、テーマの<head></head>があるテンプレートファイルから以下のようにスタイルシートを呼び出します。

アイコンフォントを利用する

あとは、ロゴで作成したアイコンフォントを表示させたい場所に、以下のようなHTMLタグを書きます。

すると、こんな感じでフォントとして表示されます。

スタイルで指定すれば色も自由に変更できます。

SVGさえあれば、IcoMoonでどんなロゴでもアイコンフォント化できます。

 

まとめ

このような感じで、SVGさえあれば、IcoMoonを利用して手軽にアイコンフォントロゴを作成することができます。

画像で表示するよりは、サイズも軽くなりますし、色も大きさも自由に指定できるようになり、背景の透過とかも気にしないで良いので、多少は使い勝手も良くなるかもしれません。