IcoMoonを使う前に
このサイトは、THE THORというテーマを使っています。
THE THORで使われているアイコンは、IcoMoonです。
THE THORのアイコン全498個を載せてくれているサイトは、こちら。
THE THOR（ザ・トール） IcoMoonクラス名・コード名 一覧表を作ったよ【498個】 | blender.promo
IcoMoon-Freeが491個なので、それを使える感じですね。
しかし、IcoMoon公式とTHE THORでは、同じアイコンでもクラス名とコードが全然違います。
今回は、X（旧twitter）のアイコンを追加して、使える様にしていきます。
THE THORのアイコンは、wp-content/themes/the-thor/fontsの中にあります。
- icomoon.eot
- icomoon.svg
- icomoon.ttf
- icomoon.woff
icomoon.svgを、ダウンロードしておきます。
IcoMoonの使い方
IcoMoon Appをクリックします。
①のImport Iconsをクリックして、先程ダウンロードしたicomoon.svgを選択します。
SVG フォントのグリフがロードされました。
フォントをエクスポートするときに、このフォントのメトリックとメタデータを使用しますか?
Yesをクリックします。
そして、IcoMoon-Freeの中には、X（旧twitter）のアイコンはありません。
②のIcon Libraryをクリックして、BrandsのAddをクリックします。
そして、Brandsの中にあるXのアイコンをクリックします。
すると、③のSelectionが、0から1に変わります。
④のGenerate Fontをクリックします。
クラス名がx（後でicon-が付く）で、コードがe900ですね。
e900は、THE THORで元々使われているコードなので、変える必要があります。
THE THORでは、コードがe900からeaf1まであります。
だから、eaf2にしました。
そして、③のSelectionをクリックして、前のアイコンが並んだ画面に戻ります。
IcoMoon-Freeではなく、THE THORのアイコンicomoon498個を加えます。
⑤のハンバーガーメニューアイコンをクリックし、Select Allを選択します。
すると、Selectionが499になります。
Generate Fontをクリックします。
Downloadをクリックします。
Downloadした圧縮フォルダーicomoonを、右クリックして、すべて展開(T)…します。
fontsと、styleを使います。
- icomoon.eot
- icomoon.svg
- icomoon.ttf
- icomoon.woff
fontsを、アップロードして下さい。
THE THORの場合、fontsは、wp-content/themes/the-thor/fontsにあります。
styleは、CSSファイルと見比べて、書いてない部分を書き足してアップロードして下さい。
THE THORの場合、styleは、wp-content/themes/the-thor/css/icon.minにあります。
具体的には、.icon-x:before{content:”\eaf2″}を最後に付け加えておいて下さい。
demoをクリックすると、こんな感じです。
Xのアイコンは、クラス名はicon-x、コードはeaf2になっていますね。
これで、問題なく使うことが出来ます。
今日は、ありがとうございました。では、また！