Font AwesomeアイコンをCSSを使ってWordPressサイトに表示させる
http://fortawesome.github.io/Font-Awesome/
Stinger5では記事公開日やカテゴリーなどのアイコンがデフォルトでFont Awesomeとなってますね。
実際に記事公開日アイコンのphpのソースを見てみると
|
1 |
<i class="fa fa-tag"></i> |
こんな感じになっていて、これがサイト上ではこうなります。
画像の場合、新しい画像を張り替えないといけなく、しかも不要な画像がサーバー上にあり容量を食ってしまったりします。ただ、php上の場合、<i></i>タグを張り替えることでアイコンが表示されるのでとても便利です。
Font AwesomeアイコンをCSSで表示させる
php上にソースを書き込むのもいいと思います。ただ、例えば見出しの先頭に「チェックマーク」を付けて見出し自体にアクセントをつけようとするなど、毎回毎回ソースを書き込むのはとっても面倒くさい。それに今まで公開した記事にも同じことをしないといけません。
こんな感じで面倒。
|
1 |
<h2><i class="fa fa-tag"></i>見出し2</h2> |
これを見出しボタンをクリックしたらFont Awesomeアイコンも一緒に表示されるようにしていきます。
最終的にこのような感じになります。
当サイトの見出し4（テーマとしてStinger5使用）ではテキストの先頭にチェックマークが表示されるようになってます。あと、サイトバーの新着エントリーなどの見出しにもCSSを使用してFont Awesomeアイコンが表示されるようになってます。
まず初めに
CDNを使用してアイコンを表示させるので、下記ソースをサイトの<head>に記述して下さい。
|
1 |
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> |
CSSの中身
当サイトのh4タグ（Stinger5使用）はこのようなソースです。
|
1 2 3 4 5 |
.post h4 { padding: 5px 5px 5px 10px; background-color: #ffffff; border-bottom: 3px #FA5858 solid; } |
これだけだとまだアイコンは表示されません。
そこで下記のようなソースを加えていきます。
|
1 2 3 4 5 |
.post h4:before { padding: 0 5px 0 0; content: "\f00c"; font-family: FontAwesome; } |
h4のあとに「:before」を追加します。
paddingはアイコンの表示位置なのでお好みで調整。
|
1 |
content: "\f00c"; |
contentのあとにある「\f00c」は
Font Awesome Icons
ここから好きなアイコンを選択クリックします。
このような表示がでるのでUnicode横の「f00c」をCSSに記述し、「f00c」にバックスラッシュもしくは円マークを記述します。フォントによって変化あり。
これでFont Awesomeアイコンが見出し4を使用したときに一緒に表示されます。
まとめ
Font AwesomeのUnicodeを使用すればphpにソースを記述しなくて済むのでとても便利です。
ほんの少しアイコンを追加して他のサイト・ブログとの差別化を測ってみてはどうでしょうか？
