IcoMoonで作るアイコンフォントの使い方とWordPress設置方法
アイコンフォントといえばFont Awesomeが有名で、使用している方も多いと思います。今回ご紹介するのはIcoMoonというフォントファイルを作れるサービスです。
Icon Font & SVG Icon Sets ❍ IcoMoon
使うフォントを選んでアイコンフォントファイルを作成し、WordPressと同じサーバーに設置しておけば、読み込みの速度の遅延はありません。
私は初め「IconMoon」だと思っていたのですが、正式名称は「IcoMoon」でした。
IcoMoonのおすすめポイント
- 使用するフォントだけのファイルを作れる
- SVG画像からオリジナルアイコンフォントを作れる
IcoMoonのページに行くと右上に紫色の背景で「IcoMonn App」ボタンがあります。そこからIcoMoon Appのページへ飛びます。
IcoMoonを使ってフォントファイルを作る
上の画像がIcoMoon Appのページです。アイコンフォントを見た目で選べるのはIcoMoon Freeだけのようです。他にも数種類のアイコンセットがありますが上部の検索窓からの検索結果としてのみ表示されます。
上の画像の上部の虫眼鏡マークが検索欄。下部の左がSVGからフォントを作るタブ。下部の真ん中がアイコンフォントを選択するタブ。下部の右がフォントファイルを作りダウンロードするタブになります。
アイコンセットの中には有料のものもあり、有料のアイコンフォントを選ぶと、支払い画面が表示されます。
無料の中に有料のアイコンフォントが混ざっていることはなくて、アイコンセットによって有料・無料の違いがあります。
IcoMoon Appを使ってフォントを選ぶ
Selectionタブで使用したいアイコンフォントを選んで、右のGenerate FontをクリックするとGenerate FontがFont Downloadに変化し、作ったアイコンフォントファイルをダウンロードできます。
上の画像では例としてマグカップのアイコンフォントを1つ選択しています。マグカップのアイコンの下に「e9a2」と表示されていますが、その部分をクリックすると下の画像のように表示が変化します。
HTMLでアイコンフォントを表示させるには一番上のHTMLの中のHTMLを使用します。記述を自分の好きなように変更できるので、法則を作ってわかりやすく変更するのも良いかもしれません。
スタイルシートの記述例
ダウンロードしたzipファイルを展開した中の「style.css」が上の画像になります。12行目までは@font-faceでフォントを読み込むための記述ですが、現在ではwoffだけ読み込めば良いと思うので、その部分の記述は削除します。
[class^="icon-"], [class*=" icon-"]で、IcoMoonのアイコンフォントに共通する記述をまとめます。HTMLでアイコンフォントを表示させる場合はこの記述で問題はありませんが、CSSで表示させる場合、例えばH2の疑似要素として表示させる場合は
h2::before{
font-famjly: 'icomoon';
content: "\e9a2";
}上のように書く必要があります。
アイコンフォントファイルを読み込む
最後にアイコンフォントファイルを読み込ませます。
@font-face {
font-family: 'icomoon';
font-style: normal;
font-weight: normal;
font-display: block;
src: local(icomoon), url('フォントファイルのパス/icomoon.woff') format("woff")
}スタイルシートに上記のコードをwoffファイルのパスを書いて記述すれば、アイコンフォントが表示されます。
最後までお読みいただき、誠にありがとうございます。