はてなブックマークなどのブランドロゴiconを
アイコンフォントにしよう

ブログでもウェブサイトでも、今やSNSボタンが設置してあるのは当たりまえの時代になりましたね。

SNSボタンを設置する際にアイコンフォントサービスを利用することが多いと思うのですが、設置したいSNSボタンのロゴがないことがよくありませんか？
海外の有名サービスなんかだとバッチリあるのですが、はてなブックマークなどのアイコンが見つかりません。

またサービスごとに利用できるブランドロゴが異なるので、こっちにはあるけどあっちにはない、ということもしばしば。
ブランドロゴに限らず、サービスごとにアイコンの感じも違うしどのサービスを使うかって結構頭を悩ませます。

両方使う？いやいや、重くなるでしょ。そもそもはてブなんかのアイコンサービスには無いアイコンをフォントとして使いたいんだよ。

じゃぁ、アイコンフォント自分で作る？

「SVGファイルを作って、フォントセットにする。」

言葉で言うと簡単だけども、めんどくさいでしょ。超めんどくさいでしょ。
仕事ならまだしも、趣味のブログでいちパーツに時間をかけるほど心の余裕はないのですよ。

そんな時、アイコンをSVGで無料配布してくれるサービスとSVGファイルをフォントファイルに変換してくれる素晴らしき2つのサービスを利用すれば、あっという間に、サクッと自分好みのアイコンフォントが出来上がります。

アイコンをSVGでダウンロードできるサービスからアイコンをダウンロード

今回はSNSアイコンがテーマなので、いろんなブランドロゴがSVGで配布されているSimple iconsというサービスを利用します。

サイトにアクセスして必要なアイコンをダウンロードするだけ

サイトにアクセスすると、様々なブランドアイコンがズラズラと出てきます。

検索窓があるので、そこに欲しいブランドの名称などを入れて検索してみます。
下記画像は、はてなブックマークのロゴアイコンが欲しくて、「hatena」と検索したものです。

欲しいアイコンが出てきたら、アイコンをクリックしてSVGをダウンロードするだけです。

必要なアイコンがあればそれもどんどんダウンロードしておきます。

これで、アイコンフォントの元となるSVGデータの準備が整いました。
あとSVGデータからフォントファイルを作ってくれるサービスを利用して、フォントファイルを作ります。

SVGファイルをフォントに変換してくれるサービスでフォントファイルを作る

IcoMoonというサービスを利用します。
IcoMoonにSVGファイルをアップロードすると、それをフォントファイルに変換し、更に、アイコン表示用のCSSファイルまで生成してくれます。
なんとも便利なサービスがあるものですね。

ありがたく使わせていただきます。

IcoMoon APPを表示して、左上のメニューにある「Import Icons」ボタンをクリックします。

先ほどダウンロードしてきたSVGデータを選んでIcoMoonにアップロードします。

アップロードしたアイコンが表示されます。

ヘッダーのメニューにある選択ボタンをアクティブにしてアイコンをクリックすると、アイコンたちがアクティブになります。
アクティブにしたアイコンのみダウンロードするという仕様なので、不要なものはアクティブにしなくても良いし、自分が登録したアイコン以外のアイコンをアクティブにしてフォントファイルに追加してもOKです。

アイコンをアクティブにしたら、フォントを生成します。
画面右下にある「Generate Font」をクリックするとフォントが生成されます。

フォントが生成されました。

生成されたフォントの一覧が表示され、アイコン名(class名)を変更できたりととても便利です。

アイコン名だけでなく、前後に付与する文字列も設定可能

上記のように、生成したアイコンそれぞれのアイコン名を変更することもできますし、アイコン名の前後にプレフィックス、ポストフィックスとして、文字列を追加することもできます。

デフォルトでは、上記アイコン名に対して「icon-」とプレフィックスが付与されたものがClass名となります。
ポストフィックスはデォルトでは設定されていません。
アイコン名が「facebook」の場合、「icon-facebook」がクラス名でクラス名は「icon-facebook」になります。

Prefixを「myIcon-」Postfixを「-icomoon」にすると、クラス名は「myIcon-facebook-icomoon」になります。

変更してフォントをダウンロードするときちんと書き換わっています。便利ですね！

特にオプションをいじる必要もないかと思いますが、何か目的があればその他オプションを触ってみてください。

あとは画面下の「Download」ボタンをクリックしてダウンロードします。

フォントファイルとcssファイルをサイトで利用できるようにする

ダウンロードしたアイコンをサイトで利用するには、

フォントファイル/フォントスタイルシートのアップロード
フォント用スタイルシートの読み込み

が必要です。

フォントファイル/フォントスタイルシートのアップロード

IcoMoonからダウンロードしたzipを解凍します。

• style.css
• fontsフォルダ

の二つが必要なデータです。
任意のディレクトリにアップロードします。

icoMoonからDLしたファイル内に記載のインポートURLなどを変更しないという前提であれば、ありがちなstyle.cssというファイル名からその他のcssファイルとのバッティングを避けるために、
icomoon/style.css
icomoon/fonts/〜以下
とした方が良いかなと思います。

インポートURLを変えるのなんて全然めんどくさくないよ！
それより、フォントは全部まとめておきたいんだ！
って場合は、適宜調整してください。

いろんなディレクトリ構造が考えられますが、/asset/css/icomoon/以下にアップロードした場合はstyle.cssを読み込むだけです。

---

自分で作ったSVGなんかもIcoMoonでフィントファイルを作って利用できますね！

IcoMoonのプロジェクトファイルが便利!

IcoMoonの素晴らしいところは、アイコンを登録してダウンロードすると、ダウンロードファイルに「selection.json」というjsonファイルが含まれていて、これがプロジェクトファイルの役目を果たします。
今回作ったアイコンセットにその他のアイコンを追加したくなった時に、selection.jsonを利用すれば、これまで含まれていたアイコンセットに追加する形で新しいアイコンセットを作ることができます。
selection.jsonがあれば、既に登録されているアイコンについてはもう一度SVGファイルをアップロードするといった手順が不要になります。
どこにSVGファイルを保存したか絶対に忘れる自信があるわたしにとっては神的な仕様です。

左のハンバーガーメニューを開き「Manage Projects」メニューをクリックします。

「Import Project」をクリックします。

ファイル一覧から、IcoMoonから以前ダウンロードしたファイルに含まれる「selection.json」を選択します。

プロジェクト一覧に選択したアイコンプロジェクトが追加されます。

プロジェクト名の横の「Load」をクリックすると、登録したアイコンが表示されます。

selection.jsonだけ持っておけば、またアイコンを追加することができるということですね。
とっても便利です。

ちなみに、プレミアムメンバーになればプロジェクトをクラウドに保存できるそうです。