2015/08/27  CSS 

アイコンフォントで便利なFont AwesomoですがLINE、はてなブックマーク、feedlyのアイコンがないので自作で作ってみました。

  

IcoMoonでアイコンフォントを作る

IcoMoonは好きなアイコンを選んでアイコンフォントにできるサービスです。IcoMoonで用意されているアイコンにもLINEなどはなかったので画像を読み込んでフォント化する方法をやってみました。

IcoMoon

(1) SVGファイルを読み込む

Import Icons」からSVGファイルを読み込みます。
アイコンはこちらのサイトで配布されていましたので利用させていただきました。

参照:ブログのデザインでも使用している「Webフォントアイコン」を本当にオススメしたい!

IcoMoon

(2) フォントファイルをダウンロード

読み込んだアイコンを選択して「Generate Font」をクリック。

IcoMoon

IcoMoon

フォントに名前を付けます。ダウンロードしてきたSVGファイルには名前がついていたのでこのままでもOKです。この名前でCSSのクラス名になります。

Download」をクリック。

IcoMoon

(3) icomoon.zipを解凍しサーバーにアップ

icomoon.zipファイルがダウンロードされるのでこちらを解凍し、解凍したファイルをアップします。

以下、WordPressでの設定になります。

テーマの直下に「icomoon」フォルダをアップロード。icomoon/style.cssを読み込む。

<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/icomoon/style.css">

こんな感じでアイコンフォントが使えるようになりました。(フォントは大きくしてあります。)

 <span class="icon-line"></span>
 <span class="icon-hatebu"></span>
 <span class="icon-feedly"></span>