以前、簡単ロゴメーカー「Design Rails」でサイトのロゴを作ってみました。
そのとき、ジェネレートされたロゴファイルの中にSVGがあったので、ロゴSVGからアイコンフォントを試しに作ってみました。
今回は、そのとき行った「SVG→アイコンフォント」の変換方法の紹介です。
photo by Ahmed Bin-Baz
目次
SVGをアイコンフォントにする手順
変換する主な手順としては、以下のようになります。
- SVGファイルを用意する（今回はDesign Railsで作った）
- IcoMoonでSVGファイルを読み込む
- フォント用の調整
- アイコンフォントを生成する
今回の方法は、無料で使えるアイコンフォントジェネレーターのIcoMoonを利用した方法です。IcoMoonを利用すれば、結構簡単にアイコンフォントを作成できます。
SVGファイルを用意する
とりあえず、今回は、サイトロゴをアイコンフォント化するために以下の方法でSVGファイルを作成しました。
作成されたSVGファイルはこんな感じです。
今回は、このSVGをアイコンフォントにしたいと思います。
もし、いろいろな色を使ったロゴだったとしてもアイコンフォントにすると単色化されます。
画像からSVGファイルを作成したい場合は、以下の方法を使って無料ソフトでも作成することができます。
IcoMoonでSVGファイルを読み込む
次にIcoMoonに移動して「Import Icons」ボタンからSVGファイルを読み込みます。
SVGファイルをインポートすると、以下のように表示されるので、「①インポートしたロゴを選択」し、「②Generate Fontをクリックしてフォントを生成」します。
フォント用の調整
「Generate Font」ボタンを押すと、以下のような画面になるので、フォント名を変更します。
今回は、サイトのロゴなので「site-logo」と付けてみました。
アイコン部分をクリックすると、調整画面が表示されるので、大きさや位置を変更したい場合は調整をします。
アイコンフォントを生成する
調整が済んだら、右下のほうにある「Download」ボタンを押してファイルをダウンロードします。
すると「icomoon.zip」というファイルがダウンロードされます。
これで、SVGファイルからアイコンフォントの作成が完了しました。とても簡単です。
IcoMoonで作成したアイコンフォントの使い方
あとは、IcoMoonで作成したアイコンフォントのWordpressでの使い方を一応説明しておきます。
アイコンフォントファイルの設置
先程ダウンロードした「icomoon.zip」を回答して、フォルダ名を「logo-icon」とでもしておきます。
このフォルダをテーマ（子テーマ）フォルダ直下にコピーします。
テンプレートファイルから呼び出す
あとは、テーマの<head></head>があるテンプレートファイルから以下のようにスタイルシートを呼び出します。
<!-- 子テーマで呼び出す場合 --> <link href="<?php echo get_stylesheet_directory_uri(); ?>/logo-icon/style.css" rel="stylesheet"> <!-- 親テーマで呼び出す場合 --> <!-- <link href="<?php echo get_template_directory_uri(); ?>/logo-icon/style.css" rel="stylesheet"> -->
アイコンフォントを利用する
あとは、ロゴで作成したアイコンフォントを表示させたい場所に、以下のようなHTMLタグを書きます。
<!-- ロゴアイコンフォントの表示 --> <span class="icon-site-logo" style="font-size:200px;"></span> <!-- 色変更も可能 --> <span class="icon-site-logo" style="font-size:200px;color:#c6001c;"></span>
すると、こんな感じでフォントとして表示されます。
スタイルで指定すれば色も自由に変更できます。
SVGさえあれば、IcoMoonでどんなロゴでもアイコンフォント化できます。
まとめ
このような感じで、SVGさえあれば、IcoMoonを利用して手軽にアイコンフォントロゴを作成することができます。
画像で表示するよりは、サイズも軽くなりますし、色も大きさも自由に指定できるようになり、背景の透過とかも気にしないで良いので、多少は使い勝手も良くなるかもしれません。
