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

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

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

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

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

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

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

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

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

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

CSS

コピーする

.post-date:before {
    content: "f017";
    font-family: FontAwesome;
    margin-right: .3em;
    color: #44CC9C;
}

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

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

CSS

コピーする

.post-pv:before {
    content: "f06e";
    font-family: FontAwesome;
    color: #44CC9C;
    margin-right: .3em;
}

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

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

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

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

CSS

コピーする

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

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

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