WordPress

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

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

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

SVGファイルを用意

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

アイコンフォントを作成

icomoon_01

IcoMoon 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を編集する

編集すると言っても、簡単です。以下の5ヶ所、fonts/icomoonの前に「./」を追加するだけ。

変更前

@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;
}

HTMLとCSSでの使い方

HTMLの例

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

使用したい場所に、このように記述することで表示されます。

CSSの例

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

icon-○○:beforeの、◯◯の部分は、ダウンロードしたファイルに、demo.htmというファイルがあるので、そこで確認できます。

ABOUT ME
ねこのてそう
ねこのてそう
超記憶力の悪い、30代の引きこもり父さん。 死ぬまで楽しく生きるがモットー。 元2ちゃんねる管理人、現4chan管理人、ひろゆきが好き。 尊敬する人は、絵を描ける人とピアノを弾ける人。嫌いなものはタバコ。 日本嫌煙党 千葉(引きこもり代表)
関連記事

COMMENT

メールアドレスが公開されることはありません。