テーマを「SANGO」に変更しました。

WordPressでアイコンフォントの「IcoMoon」を設定してみた

STINGER5で、アイコンフォントの「IcoMoon」を使用出来るように設定しました。

これで、FontAwesomeにはない、feedly・はてブなどのアイコンフォントを表示できるようになりました! 

SVGファイルを用意する

IcoMoonのサイトでは、.svgファイルを読み込んで、アイコンフォントを作成できます。

SVGファイルは、ドウラクさんでダウンロード可能です。 sw2xさん、ありがとうございます!

参考

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

IcoMoonのサイトでアイコンフォントを作成

IcoMoonの公式サイトへ行き、フォントを作成します。

icomoon_01

IcoMoonをクリック。

 

icomoon_02

画面左上のInport Iconsをクリック。

ダウンロードしたSVGファイルを読み込み。使用したいアイコンフォントを選択。

選択し終わったら、Generate Fontをクリック。

 

icomoon_03

作成したアイコンフォントをダウンロード。

Downloadをクリック。

fontsフォルダをアップロード

ダウンロードしたファイルの中にあるfontsフォルダを、使用しているテーマのstyle.cssと同じ階層にアップロードします。

作成したアイコンフォントのstyle.cssをコピー

@font-face {
	font-family: 'icomoon';
	src:url('fonts/icomoon.eot?s55jcc');
	src:url('fonts/icomoon.eot?#iefixs55jcc') format('embedded-opentype'),
		url('fonts/icomoon.woff?s55jcc') format('woff'),
		url('fonts/icomoon.ttf?s55jcc') format('truetype'),
		url('fonts/icomoon.svg?s55jcc#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-feedly:before {
	content: "\e602";
}
.icon-hatebu:before {
	content: "\e603";
}
.icon-line:before {
	content: "\e604";
}
.icon-pocket:before {
	content: "\e605";
}

わたしの場合、こんな感じのコードになりました。

ダウンロードしたファイルの中にある、style.cssの中身をコピーして、使用しているテーマのstyle.cssに貼り付けます。

style.cssの編集

変更前
@font-face {
font-family: ‘icomoon’;
src:url(‘fonts/icomoon.eot?s55jcc’);
src:url(‘fonts/icomoon.eot?#iefixs55jcc’) format(‘embedded-opentype’),
url(‘fonts/icomoon.woff?s55jcc’) format(‘woff’),
url(‘fonts/icomoon.ttf?s55jcc’) format(‘truetype’),
url(‘fonts/icomoon.svg?s55jcc#icomoon’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
変更後
@font-face {
font-family: ‘icomoon’;
src:url(‘./fonts/icomoon.eot?s55jcc’);
src:url(‘./fonts/icomoon.eot?#iefixs55jcc’) format(‘embedded-opentype’),
url(‘./fonts/icomoon.woff?s55jcc’) format(‘woff’),
url(‘./fonts/icomoon.ttf?s55jcc’) format(‘truetype’),
url(‘./fonts/icomoon.svg?s55jcc#icomoon’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

以下の5箇所、fonts/icomoonの前に「./」を追加。

IcoMoonのフォントを使用する方法

HTMLの場合
<span class=”icon-feedly”></span>
cssの場合
.icon-feedly:before {
content: “\e602”;
}

icon-○○の部分は、ダウンロードしたファイルの、demo.htmlで確認できます。

コメントを残す