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

【STINGER5】アイコンフォント「IcoMoon」の設定

eyecatch_icomoon

STINGER5でアイコンフォントの「IcoMoon」を使用出来るように設定しました。 これで、FontAwesomeにはない、pocket・feedly・はてブ等のアイコンフォントを表示出来ます。  

SVGファイルを用意する

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

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

 

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

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

icomoon_01

IcoMoon Appをクリック。  

 

icomoon_02

画面左上のImport 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に貼り付けます。

 

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');

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

これで、準備完了です。  

 

アイコンフォントを使用する

HTMLの場合

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

icon-のうしろに続く文字は、ダウンロードしたファイルのdemo.htmlで確認して下さい。  

 

cssの場合

.icon-feedly:before {
content: "\e602";
}

コメントを残す