カテゴリー
小ネタ

Genericonsを使ってみる

WPのTwenty Fifteenには便利なアイコンフォントが一緒に入っています。
Genericonsというものです。 http://genericons.com

上記サイトに行くと、使えるアイコンが一覧できます。

スクリーンショット 2015-08-07 9.59.19

使いたいアイコンをクリックしてかから、「Copy CSS」や「Copy HTML」をクリックすると、下図のようにダイアログが表示されてコードをコピペ出来るので便利です。

 

スクリーンショット 2015-08-07 10.03.37

 

アイコンを実際につけてみます。

<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>

表示は下記のような感じ。

これはサマリーのアイコンです

これはカートです

小さいアイコンて作るのも少々面倒だったり、サイズや色のバリエーションを考えたりとか、結構手間に思っていたので、こういうのがとても助かります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です