ハイリンクス

WordPressのプラグインやオススメツール・ソフト、その他実際に使ってみて「コレだ!」というものをご紹介

Font AwesomeアイコンをCSSを使ってWordPressサイトに表示させる

   

141122_2101

http://fortawesome.github.io/Font-Awesome/

Stinger5では記事公開日やカテゴリーなどのアイコンがデフォルトでFont Awesomeとなってますね。

実際に記事公開日アイコンのphpのソースを見てみると

こんな感じになっていて、これがサイト上ではこうなります。

141122_2102

画像の場合、新しい画像を張り替えないといけなく、しかも不要な画像がサーバー上にあり容量を食ってしまったりします。ただ、php上の場合、<i></i>タグを張り替えることでアイコンが表示されるのでとても便利です。

スポンサーリンク

Font AwesomeアイコンをCSSで表示させる

php上にソースを書き込むのもいいと思います。ただ、例えば見出しの先頭に「チェックマーク」を付けて見出し自体にアクセントをつけようとするなど、毎回毎回ソースを書き込むのはとっても面倒くさい。それに今まで公開した記事にも同じことをしないといけません。

こんな感じで面倒。

これを見出しボタンをクリックしたらFont Awesomeアイコンも一緒に表示されるようにしていきます。

最終的にこのような感じになります。

141122_2103

当サイトの見出し4(テーマとしてStinger5使用)ではテキストの先頭にチェックマークが表示されるようになってます。あと、サイトバーの新着エントリーなどの見出しにもCSSを使用してFont Awesomeアイコンが表示されるようになってます。

 

まず初めに

CDNを使用してアイコンを表示させるので、下記ソースをサイトの<head>に記述して下さい。

Get Started with Font Awesome

 

CSSの中身

当サイトのh4タグ(Stinger5使用)はこのようなソースです。

これだけだとまだアイコンは表示されません。

そこで下記のようなソースを加えていきます。

h4のあとに「:before」を追加します。

paddingはアイコンの表示位置なのでお好みで調整。

contentのあとにある「\f00c」は
Font Awesome Icons

ここから好きなアイコンを選択クリックします。

141122_2106

このような表示がでるのでUnicode横の「f00c」をCSSに記述し、「f00c」にバックスラッシュもしくは円マークを記述します。フォントによって変化あり。

141122_2104

これでFont Awesomeアイコンが見出し4を使用したときに一緒に表示されます。

141122_2103

まとめ

Font AwesomeのUnicodeを使用すればphpにソースを記述しなくて済むのでとても便利です。

ほんの少しアイコンを追加して他のサイト・ブログとの差別化を測ってみてはどうでしょうか?

 - WordPress, サイト運営, デザイン


  • このエントリーをはてなブックマークに追加

Message

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

関連記事

140320_1908
【Caesium】画質設定ができて圧縮前後の画像をプレビュー確認できるフリーソフト!

Caesiumは圧縮前後の画像をプレビューで確認できるフリーソフトです。 このペ …

140105_2301
【WordPress】YouTubeやデイリーモーションの画像を記事に貼り付ける方法!

WordPressにYouTubeやDailymotionなどの動画を記事に貼り …

stinger5
Stinger5「購読する」ボタンと同じようにソーシャル関連ボタンも表示!

Stinger5のサイドバーに「購読する」っていうボタンありますよね? 画像とし …

medium_8663075893
WordPressの記事公開前に「いいの?」と警告メッセージを表示する方法

WordPressでサイト・ブログを作成しているなら一度は経験したことがあるあれ …

medium_4870433965
商用利用可能!クレジット表記不要!フリー写真・画像サイト15選

サイトに画像はつきもの。でもサイトに合った、記事にあった画像を見つけるのはちょっ …

141118_1904
エックスサーバーからワンクリックでWordPressの表示速度が高速化!

はてブをチェックしていたらこんな記事を発見しました。 レンタルサーバーの速度向上 …

medium_192635773
Stinger3で記事中に広告やTwitterを入れスマホで見ると半分に切れているのを直す方法!

WordPressのテーマでStinger3を使用しているユーザーさんは今ではか …

131212_2138
WordPressのコメント欄をカスタマイズ!メルアド・サイト項目を削除

WordPressのデフォルトのコメント欄って要らない項目を削除することが素人に …

131129_2201
【zenback】サイトへのアクセス数がアップ↑する魔法のブログパーツ

zenbackはサイト・ブログの記事下・サイドバーに設置することで、関連記事やソ …

small__503686514
独自ドメインをサーバーに設定する方法(お名前ドットコム+ロリポップ)

ロリポップでサーバーの契約を無事に終了させて、お名前ドットコムにて独自ドメインを …