Web筋トレも使っているサーバー!ロリポップを使ってみない?

記事に必要な小さいアイコンをwebフォントで。

Sponser Link

ブログ投稿の日付・カテゴリ・タグをWebフォントを使ってシンプルに彩る

http://fontello.com/

から欲しいアイコンだけを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と階層が変わっているので、../を./に書き換える

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

さらに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’;}

 

Sponser Link

1 COMMENT

webフォントでアイコン~その2~ | studio-0 へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。