【Cocoon】cssで文字の前後にアイコンフォントを付ける方法

Font Awesomeブログ運営
2019.01.17

「webアイコンフォント」って聞いたことありますか？

簡単に言うと、画像を使わずにアイコンを表示させるテクニックなんですが、Cocoonの場合これがめちゃくちゃ簡単に使えるんですよ。

サイトの印象が味気ないときにワンポイントで活用するのがおすすめ。

そんなわけで今回は、文字の前後にアイコンフォントを付ける方法を解説していきます。

Cocoonで使われているアイコンフォント「Font Awesome」

アイコンフォントを表示させる方法はいくつかあるんですが、Cocoonで使われているのは「Font Awesome」というサービスです。

無料で使えるアイコンだけでも1,000種類を軽く超える超優良サービス。SNSのアイコンはもちろん、基本的なものは全て網羅しています。

ちなみに、Font Awesomeを使うためには通常前準備が必要なんですが、WordPressのテーマ「Cocoon」の場合はすでに実装されているので、あとはcssで好きな箇所に表示させるだけ。超簡単。

今回紹介する方法を使えば、好きな箇所にアイコンを使うことができるようになります。

webアイコンフォントを使うメリット

ここで少し、アイコンフォントを使うメリットを確認しておきましょう。

全部で３つあります。

１、画像を使うよりサイトを軽量化できる

一番大きなメリットはサイトの軽量化です。

webページにおいて、画像ってかなりのデータ量を占めているんですよね。

これはページの読み込み速度にも直結するので、なるべく不必要な画像は入れないようにしたいわけです。

ですから、アイコンフォンで補える箇所はなるべく画像を使わないように心がけましょうってこと。

ユーザビリティの向上にはこうした小さな積み重ねが重要です。

２、画像と違っていくら拡大してもぼやけない

またアイコンフォントは、画像と違っていくら拡大してもぼやけないのというのも便利。

分かりやすく言うと「テキスト」と同じ扱いなので、画像のように解像度とか関係なく常にきれいなアイコンを表示させることができます。

特にスマホで見た時は、一目瞭然の差が生まれますね。

３、色とサイズを自由に選べる

さらに、アイコンフォントは「色」と「サイズ」をcssで自由に決めることができます。

画像は一つ一つ作る必要がありますが、これなら変更も簡単にできるので作業量をかなり減らせるはず。

わざわざ画像を組み込むよりも圧倒的に楽です。

アイコンフォントを多用するのも問題ですが、画像で表示するよりはデータ量をはるかに減らせるのでどんどん活用しましょう。

【Cocoon】文字の前後にアイコンを付ける方法

それでは、アイコンフォントを実装する方法を解説していきます。

HTMLとcssを理解している人には至ってシンプルな内容だと思います。

Cocoonにある「カテゴリーウィジェット」の文字を例に、実際にアイコンフォントを付けてみましょう。

Cocoon　アイコンフォント

こんなイメージ。

文字の左にアイコンフォントを表示させています。

.widget_categories ul .cat-item a::before{ 
   content: "\f105"; 
}

１、使いたいアイコンを選ぶ

Font Awesome

まずは、使用したいアイコンを選びましょう。

Font Awesomeより好きなアイコンフォントを選んだら、左上の数字を控えておいてください。

これを後ほどcssプロパティの値として使います。

２、どこにアイコンを付けるのか

続いて「どこにアイコンをつけるか」をHTMLを見ながら調べます。

chromeの場合は右クリックより「検証」を選択すると、マウスポインターを当てていた箇所のHTMLが表示されます。（Firefoxは「要素を調査」、IEは「要素の検査」）

Cocoonのカテゴリーはこんな構造です。

<aside id="catagories-2" class="widget widget-sidebar widget-sidebar-standard widget_categories">
   <h3 class="widget-sidebar-title widget-title">カテゴリー</h3>
   <ul>
      <li class="cat-item cat-item-5">
         <a href="https://ffsee.net/category/web/">web制作</a>
      </li>
      <li class="cat-item cat-item-8">
         <a href="https://ffsee.net/category/column/">コラム</a>
      </li>
      <li class="cat-item cat-item-4">
         <a href="https://ffsee.net/category/netshop/">ネットショップ運営</a>
      </li>
     <li class="cat-item cat-item-6">
         <a href="https://ffsee.net/category/handmade/">ハンドメイド</a>
     </li>
     <li class="cat-item cat-item-3">
         <a href="https://ffsee.net/category/blog/">ブログ運営</a>
      </li>
      <li class="cat-item cat-item-7">
         <a href="https://ffsee.net/category/workstyle/">ワークスタイル</a>
      </li>
   </ul>
</aside>

今回アイコンフォントを付ける対象は、6個ある「aタグ」。

つまりここでいうと、全てのカテゴリーの左にアイコンを付けたい場合の対象セレクタは、

.widget_categories ul .cat-item a

ということになります。

３、css疑似クラスを使って文字の前後にアイコンを挿入

最後に、上記で調べた対象セレクタに対して、疑似クラスを使って前後どちらにアイコンを追加するのかを指定します。

  • ::before・・・文字の前
  • ::after・・・文字の後

実際のセレクタで表すと

.widget_categories ul .cat-item a::before
.widget_categories ul .cat-item a::after

となります。

今回は前につけたいので使うのは「::before」ですね。

あとは、疑似クラス専用のプロパティである「contentプロパティ」を使って、アイコンを追加してあげるだけ。

.widget_categories ul .cat-item a::before{
   content: "\f105";
}

これで、文字の前後にアイコンフォントを挿入することができます。

css疑似クラス「::before」と「::after」

今回キーとなったcssの疑似クラス。

「::before」と「::after」。そして疑似クラス専用の「contentプロパティ」。

文字の前後にアイコンフォントを付けたいときは、今回紹介した形を覚えておくだけでOKです。

SNSボタンのアイコンを表示させるときや、リストを際立たせたいときに使ってみてください。