ブログ投稿の日付・カテゴリ・タグをWebフォントを使ってシンプルに彩る
から欲しいアイコンだけをzipでダウンロード
themeフォルダーの任意のテーマフォルダーの直下にfontフォルダーごといれる
index.phpとsingle.phpを書き換える
[php] <div class=”post-meta”><span class=”kdate”><?php echo get_the_date(); ?></span><span class=”kcate”><?php the_category(‘,’); ?></span><span class=”ktag”><?php the_tags(‘,’); ?></span></div>[/php]
cssにwebフォントを指定する
ダウンロードしたcssと階層が変わっているので、../を./に書き換える
@font-face {
font-family: ‘fontello’;
src: url(‘./font/fontello.eot?48629566’);
src: url(‘./font/fontello.eot?48629566#iefix’) format(‘embedded-opentype’),
url(‘./font/fontello.woff?48629566’) format(‘woff’),
url(‘./font/fontello.ttf?48629566’) format(‘truetype’),
url(‘./font/fontello.svg?48629566#fontello’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
さらにcssにdとやったら時計のアイコン、cならフォルダーアイコン、tならタグアイコン
を指定する
.kdate, .kcate, .ktag {margin-right : 5px;}
.kdate:before, .kcate:before, .ktag:before {
font-family:’fontello’;
margin:0 3px;
}
.kdate:before {content:’d’;}
.kcate:before {content:’c’;}
.ktag:before {content:’t’;}
[…] たようなエントリーがありましたが、こちらの方が簡単かな。 記事に必要な小さいアイコンをwebフォントで。 […]