WPのTwenty Fifteenには便利なアイコンフォントが一緒に入っています。
Genericonsというものです。 http://genericons.com
上記サイトに行くと、使えるアイコンが一覧できます。
使いたいアイコンをクリックしてかから、「Copy CSS」や「Copy HTML」をクリックすると、下図のようにダイアログが表示されてコードをコピペ出来るので便利です。
アイコンを実際につけてみます。
<span class="genericon genericon-summary">これはサマリーのアイコンです</span>
ソースにこんな風に書くと・・・・。
これはサマリーのアイコンです
↑↑↑↑↑こんな風に表示されます。カンタン!!
※テーマをTwenty FIfteenにして試してください。
上記はパッケージ内ですでに設定されているものを利用していますが、CSSに下記のように指定すれば、クラス名は自由にカスタマイズすることもできます。
<style type="text/css"> .my-icon-summary:before { content: '\f425'; font-family: "Genericons"; font-size: 30px; line-height: 1; vertical-align: middle; } .my-icon-cart:after { content: '\f447'; font-family: "Genericons"; font-size: 30px; line-height: 1; vertical-align: middle; color: #F00; } </style> <span class="my-icon-summary">これはサマリーのアイコンです</span> <span class="my-icon-cart">これはカートです</span>
表示は下記のような感じ。
小さいアイコンて作るのも少々面倒だったり、サイズや色のバリエーションを考えたりとか、結構手間に思っていたので、こういうのがとても助かります。