RedStub

Web制作とか日常のこととか

リスト先頭のアローをfont-awesomeで実装

   

昔からよくつかわれるリスト要素の先頭につけるアロー(右向きの三角形)。
サイト毎に(あるいは1つのサイト内でも)アローの色、サイズが違っていると画像の色、サイズを変更して書き出したりと面倒。

せっかくfontawesomeという便利なfont(アイコン)があるのでこれを使って実装してみます。

まず必要なのが、font-awesomeを読むこむ記述。head内に記述します。

case.1 imgタグを使用する場合

これはごく普通の使い方です。

CSSで少し文字間などを調整

■実装例

  • リスト要素1
  • リスト要素2
  • リスト要素3

色、サイズをCSSだけで指定できるのがなんといってもfont-awesomeのメリット。
コーダー、デザイナーともに易しいエコな実装方法ですね。

しかしこのアローを画像として使用していた場合、大体背景画像としてるケースが多いですね。
liのなかにiタグが入ることを毛嫌いする方も多いかもしれません。

case2. iタグを使わずに(:beforeで)実装

iタグが気になる場合は擬似要素beforeで実装します。
CSSを以下のように記述

これでHTMLはシンプルに実装できます。

■実装例

  • リスト要素1
  • リスト要素2
  • リスト要素3

もちろん、右向きの三角以外でも必要なアイコンに変更する場合は、
「fa-caret-right」や「\f0da」の部分を変更するだけ!

とても簡単に変更できちゃいます。

 - HTML5・CSS3, Webデザイン , ,