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

この記事は約3分で読めます。

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

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