【Webフォント導入】好きなアイコンだけを選んで使えるicomoonの使い方

最近はアイコンフォントを使ったサイトを多く見かけるようになりましたね。最初アイコンフォントの存在を知らなかったため、普通に画像を使ったサイトだと思っていたことはナイショにしておきます。

ファッションの流行には乗れていない私ですが、WEBの流行には乗っかろうと目論み当ブログにもアイコンフォントを入れてみました。

icomoonをWordPressに導入の手順

欲しいアイコンを選ぶ！

[browser-shot width=”300″ url=”https://icomoon.io/app/”]

まずはicomoonの下記のページで使いたいアイコンを選びます。

IcoMoon App – Icon Font & SVG Generator

このページに欲しいアイコンがみつからなければもっと追加することが出来ます。ページを下にスクロールしていき左下に出ている【Add Icons From Library…】をクリック。

気になる絵柄があれば【Remove】をクリック。そうするとアイコンの追加画面に切り替わり、その種類の絵柄が追加されます。

欲しい画像がみつからなかったら・・・

上記のところにも欲しいアイコンが見つけられなかった場合、icomoonは自作のアイコンやフリーのSVGアイコンなどもWEBフォント化することが出来るのです。WEBフォント化にすることができるのはSVG形式の画像です。SVG形式の画像はIllustratorなどで作成することができますが、探せば無料で利用できるサイトもたくさんあります。

2014年、無料で商用利用できる最新フリーアイコン素材のまとめ

これらを組み合わせれば、さすがに好みの画像をみつけることが出来そうですね

SVGアイコンは【Import Icons】からインポートさせます。そうするとアイコンのセレクト画面にインポートしたアイコンが追加されるのです。

使いたいアイコンを選んだら【Font】をクリック。

アイコンの名前はそのままclass名になります。自分の好きなように変更することも出来ますのでそこはお好みで。
変更が終わったら【ダウンロード】をクリック。

zipファイルがダウンロードされますので、解凍後ファイルを開き【fonts】というファイルをアイコンフォントを使いたいテーマのStyle.cssと同じ階層へFTPソフトでアップロードします。

次にダウンロードしたicomoonのファイルの中のstyle.cssファイルを開きます。

@font-face {
	font-family: 'icomoon';
	src:url('fonts/icomoon.eot?-gt222');
	src:url('fonts/icomoon.eot?#iefix-gt222') format('embedded-opentype'),
		url('fonts/icomoon.woff?-gt222') format('woff'),
		url('fonts/icomoon.ttf?-gt222') format('truetype'),
		url('fonts/icomoon.svg?-gt222v#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-warning:before {
	content: "\e600";
}
.icon-gift:before {
	content: "\e601";
}
.icon-home:before {
	content: "\e602";
}
～以下略～

これをそのままWordPressのテーマのstyle.cssにコピペします。コピペ後、相対パスを変更します。

@font-face {
	font-family: 'icomoon';
	src:url('./fonts/icomoon.eot?-gtma2v');
	src:url('./fonts/icomoon.eot?#iefix-gtma2v') format('embedded-opentype'),
		url('./fonts/icomoon.woff?-gtma2v') format('woff'),
		url('./fonts/icomoon.ttf?-gtma2v') format('truetype'),
		url('./fonts/icomoon.svg?-gtma2v#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

(‘./fonts/icomoon～のようにfontsのまえに【./】を追加してください。

icomoonの使い方

アイコンフォントはフォントと同じ扱いなので、フォントのようにサイズや色など好きなように変えることが出来ます。

自分の選んだフォントを確認したい場合は、icomoonのダウンロードしたファイルのなかに【demo】というファイルで確かめることが出来ます。

アイコンフォントをHTMLで使う

まずWordPressでいうと投稿や固定ページ等HTMLの画面で表示するやり方です。

<span class="icon-に続く英単語"></span>

これで簡単に表示することが出来ます。icon-に続く英単語英単語の部分は【demo】というファイルで確認できます。

spanタグなのでそのままstyleを指定することもできます。

<span class="icon-twitter" style="color:#4dccf5"></span>

フォントと同じなので拡大してもクッキリ見えます。投稿ページや固定ページ、phpファイルで使うときはこのように記載します。

アイコンフォントをcssで使う

cssとしてデザインに組み込むことも出来ます。見出しのデザインとして使ったり、リストの頭に付けたりといろいろ使い道はありそうですね。

このリンクの頭にhttp://shufulife.com/にこのアイコンフォントを表示する場合の例

 a:before{ 
    content: "\e60f"; 
    font-family: "icomoon",sans-serif;
    padding-right:10px;
    padding-left:5px
}

content: “\e60f”この部分の英数字はDEMOファイルにて確認し好きなアイコンの文字を入力。font-familyはそのまま、 padding部分はデザインに合わせて調整してください。

これはあくまでも例です。これをコピペするとサイトのaタグ全体にマークが付いてしまいます！classやidなど割り当ててやってみてくださいね。

http://shufulife.com/

まとめ

いろんなアイコンフォントを使えるサービスは出ていますが、icomoonは自分でオリジナルのフォントが簡単に作れるのでオリジナリティーを重視した方に向いていると思います。

こちらでも使わせてもらっているテーマSTINGER5には「FontAwesome」があらかじめ搭載されていたので、重複しないよう気を付けてください。