Font Awesomeだけじゃない！IcoMoonを使ってみよう
※このページにはプロモーションが含まれています。
アイコンフォントといえばFont Awesomeが有名で使用している方も多いと思います。
今回ご紹介するのはIcoMoonというフォントファイルを作れるサービスです。
Icon Font & SVG Icon Sets ❍ IcoMoon
使うフォントを選んでフォントファイルを作成し、WordPressと同じサーバーに設置しておけば、読み込みの速度の遅延はありません。
私は初め「IconMoon」だと思っていたのですが、正式名称は「IcoMoon」でした。
IcoMoonのおすすめポイント
- 使用するフォントだけのファイルを作れる
- SVG画像からオリジナルフォントを作れる
IcoMoonのページに行くと右上に紫色の背景で「IcoMonn App」ボタンがあります。そこからIcoMoon Appのページへ飛びます。
Amazon セールとイベント
冬の味覚ポイント高還元カニ特集 【期間限定】ダブルポイント祭りIcoMoonを使ってフォントファイルを作る
上の画像がIcoMoon Appのページです。アイコンフォントを見た目で選べるのはIcoMoon Freeだけのようです。他にも数種類のアイコンセットがありますが上部の検索窓からの検索結果としてのみ表示されます。
上の画像の上部の虫眼鏡マークが検索欄。下部の左がSVGからフォントを作るタブ。下部の真ん中がアイコンフォントを選択するタブ。下部の右がフォントファイルを作りダウンロードするタブになります。
アイコンセットの中には有料のものもあり、有料のアイコンフォントを選ぶとお支払い画面が表示されるようになっています。
無料の中に有料のアイコンフォントが混ざっていることはなくて、アイコンセットによって有料・無料の違いがあります。
IcoMoon Appを使ってフォントを選ぶ
Selectionタブで使用したいアイコンフォントを選んで、右のGenerate FontをクリックするとGenerate FontがFont Downloadに変化し、作ったフォントファイルをダウンロードできます。
上の画像では例としてマグカップのアイコンフォントを1つ選択しています。
マグカップのアイコンの下に「e9a2」と表示されていますが、その部分をクリックすると下の画像のように表示がされます。
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ファイルのパスを書いて記述すれば、アイコンフォントが表示されるはずです。
最後までお読みくださり、誠にありがとうございます。
週間アクセスランキング
このブログを書いている人
ほんだ
数多くあるブログの中で、このページをお読みくださりありがとうございます。このブログは、炭火で美味しいものを作ることを中心に、日々の趣味についてを文章にすることで、WordPressを使ってのWebページ作成を忘れないようにしています。熱帯魚の世話や野菜の栽培、Linuxについて興味のあることを、つたない文章で綴っています。兵庫県在住です。