昔からよくつかわれるリスト要素の先頭につけるアロー(右向きの三角形)。
サイト毎に(あるいは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」の部分を変更するだけ!
とても簡単に変更できちゃいます。