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>
表示は下記のような感じ。
小さいアイコンて作るのも少々面倒だったり、サイズや色のバリエーションを考えたりとか、結構手間に思っていたので、こういうのがとても助かります。