2017年9月28日更新

賢威サイトをアイコンフォントで簡単デコレーションする方法:FontAwesome

Thumbnail

今回の記事では、FontAwesome というアイコンフォントを使って、賢威7.0で作ったウェブサイトをデコレーションする方法をご紹介します。

ここ最近、ファイルサイズの軽さから、表示が早いと言われる SVG を使って画像を使う方法が流行っていますが、そんな軽いと評判の SVG より表示が早いのが、FontAwesome をはじめとするアイコンフォントです。

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

fontawesome-site-top

FontAwesome の読み込みには、 CDN と テーマ内からの読み込み という方法がありますが、多くのサイトで使われている CDN より更に表示が早いのが、テーマ内からの読み込みです。

賢威7.0では、この FontAwesome を最初からテーマ内で読み込んでくれているので、これを利用しない手はありませんよね。

今回は、そんな世界中で大人気の FontAwesome を使って、賢威7.0 のサイトをデコレーションする方法を紹介していきたいと思います。

まずは使いたいアイコンを決める

まずは下の FontAwesome のサイトから使うアイコンを考えます。
アイコンの数が多いのは嬉しい限りなんですが、ここまで数が多いと全部のアイコンを見るだけでも一苦労です。

https://fortawesome.github.io/Font-Awesome/cheatsheet/

font-awesome-cheat-sheet

記事公開日時の前にアイコンを表示させる

まずは記事公開日の前に fa-clock-o という時計のアイコンを表示させましょう。
今回は :before を使っていくので、 [] と書かれた中の、 f017 が必要な情報です。

fontawesome-fa-clock

時計のアイコンを投稿日の前に表示させるには、以下のコードをCSSファイルに追加します。

CSS
コピーする
.post-date:before {
content: "f017";
font-family: FontAwesome;
margin-right: .3em;
color: #44CC9C;
}

これで時計のアイコンが表示されましたね。
上のコードの形式は、他の場所でも使い回すことができるので、このようなもの、と覚えてしまった方がいいかもしれません。

FontAwesome_time

閲覧数の前にアイコンを表示させる

閲覧数ということで、ちょっとリアルな目のアイコンを使ってみます。
このアイコンも先ほどのページから、f06e という箇所をコピペします。

CSS
コピーする
.post-pv:before {
content: "f06e";
font-family: FontAwesome;
color: #44CC9C;
margin-right: .3em;
}

FontAwesome_view

アイコンを表示させる要素のクラス名を調べるには?

アイコンを表示させるためには、クラス名などのセレクタが必要になりますが、そのクラス名や要素名は、Chromeなどの開発者ツールを使うと便利です。

Chrome を右クリックして「要素を検証」とすれば、下のようにアイコンを表示させたい要素のクラス名を簡単に調べることが出来ます。

chrome-dev-tool

他の要素にもアイコンを表示させる

タグなどの他の要素についても、ここまでの方法と全く同じ流れです。

表示させたい位置を右クリックして「要素を検証」、FontAwesome のサイトからアイコンのコードをコピペしてCSSを追加します。

CSS
コピーする
.post-tag > p:before {
content: "f02b";
font-family: FontAwesome;
margin-right: .3em;
color: #44CC9C;
}

FontAwesome_tag

アイコンを好きな場所に自由に表示するには、CSS の勉強が多少必要になるかもしれませんが、開発者ツールを使うかどうかで、作業の速さや出来ることの範囲が大きく変わるはずです。

サイドバーのウィジェットについてもアイコンを表示させるコードを載せておいたので、よかったら参考にして下さい。

新着記事ウィジェットのタイトル

CSS
コピーする
.widget_keni_recent_post h3.section-title:before {
content: "f249";
color: #ccc;
font-family: FontAwesome;
margin-right: .5em;
color: #44CC9C;
}

FontAwesome_recent_post_title

人気記事ランキングウィジェットのタイトル

CSS
コピーする
.widget_keni_pv .section-title:before {
content: "f091";
font-family: FontAwesome;
margin-right: .5em;
color: #44CC9C;
}

FontAwesome_ranking

Copyrights © WebCraftLogAll Rights Reserved.