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

webフォントでアイコン~その2~

以前も似たようなエントリーがありましたが、こちらの方が簡単かな。
記事に必要な小さいアイコンを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のチートシートはこちらチートシート

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

‘,
) );

[/php]

書き出されたソースに下記cssを書く。『\f015』などはチートシートに出ている。
例えば家アイコン『&#xf015;』→\f015
前のと後ろの;を削除して円マークを付けて、content:の値にする。

[css] .post-single-body a:before{
content:"\f08e";
font-family:Fontawesome;
padding-right:5px;
}
[/css]

margin-rightでアイコンとテキストの間隔をとるのも注意点。

コメントを残す

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

CAPTCHA