WordPress

WordPressでアイコンフォントの「IcoMoon」を設定する方法

IcoMoonのアイコンフォントを設定すると、FontAwesomeにはない、アイコンフォントを表示できるようになります。

あとで説明するSVGファイルを作成できれば、オリジナルのアイコンフォントも使用できるので、他のサイトと差別化も可能です。

SVGファイルを用意

IcoMoonでアイコンフォントを作成するには、SVGファイルが必要です。SVGファイルは、ドウラクさんでダウンロードしたものを使用させていただきました。

アイコンフォントを作成

icomoon_01

IcoMonn Appをクリック。

 

icomoon_02

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

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

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

 

icomoon_03

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

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

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

style.cssをコピー

ダウンロードしたファイルの中にある、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;
}[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の編集

変更前@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で確認できます。

ABOUT ME
ねこのてそう
ねこのてそう
妻、娘、ネコと暮らす、超記憶力の悪い30代のオッサン。 好きな言葉は、死ぬこと以外、かすりキズ。 尊敬する人は絵を描ける人とピアノを弾ける人。嫌いなものはタバコ。 元2ちゃんねる管理人ひろゆきが好き。(趣味と思考が似てる) ニコニコ生放送の、暗黒リスナー歴9年。