アイコンフォントで便利なFont AwesomoですがLINE、はてなブックマーク、feedlyのアイコンがないので自作で作ってみました。
目次
IcoMoonでアイコンフォントを作る
IcoMoonは好きなアイコンを選んでアイコンフォントにできるサービスです。IcoMoonで用意されているアイコンにもLINEなどはなかったので画像を読み込んでフォント化する方法をやってみました。
1. SVGファイルを読み込む
「Import Icons」からSVGファイルを読み込みます。
アイコンはこちらのサイトで配布されていましたので利用させていただきました。
ブログのデザインでも使用している「Webフォントアイコン」を本当にオススメしたい！
https://douraku.sw2x.com/note/web-font-icon/
2. フォントファイルをダウンロード
読み込んだアイコンを選択して「Generate Font」をクリック。
フォントに名前を付けます。ダウンロードしてきたSVGファイルには名前がついていたのでこのままでもＯＫです。この名前でCSSのクラス名になります。
「Download」をクリック。
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>