Sponser Link
以前も似たようなエントリーがありましたが、こちらの方が簡単かな。
記事に必要な小さいアイコンをwebフォントで。
同じfont awesome を使ったアイコン表示のやり方です。
アイコン一覧はこちら
(1)スタイルシートのリンクをheader.phpに。
[html]<link href=”//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css” rel=”stylesheet”>[/html]
(2)アイコンclassのチートシートはこちらチートシート
(3)カスタムメニューなら『表示オプション』でcssタグを有効にして、
『fa fa-reply』などfaとアイコンclassを書く
(4)サイドバー(widget)のアイコン表示なら、function.phpに下記を書けばタグを入れられて、classもいれられる。
[php] add_theme_support(‘menus’);register_sidebar(
array(
‘before_widget’ => ‘
<div id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</div>
‘,
‘before_title’ => ‘
<h3 class=”widget_title”>’,
‘after_title’ => ‘</h3>
‘,
) );
書き出されたソースに下記cssを書く。『\f015』などはチートシートに出ている。
例えば家アイコン『』→\f015
前のと後ろの;を削除して円マークを付けて、content:の値にする。
content:”\f08e”;
font-family:Fontawesome;
padding-right:5px;
}
[/css]
margin-rightでアイコンとテキストの間隔をとるのも注意点。
Sponser Link
