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

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

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

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

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

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

<ul class="list-arrow"><li><i class="fa fa-caret-right"></i>リスト要素1</li><li><i class="fa fa-caret-right"></i>リスト要素2</li><li><i class="fa fa-caret-right"></i>リスト要素3</li></ul>

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

■実装例

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

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

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

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

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

.list-arrow-bg li{position: relative;padding-left: 1em;}.list-arrow-bg li:before {font-family: FontAwesome;content: "\f0da";left: 0;position: absolute;top: 0;}

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

<ul class="list-arrow-bg"><li>リスト要素1</li><li>リスト要素2</li><li>リスト要素3</li></ul>

■実装例

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

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

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