スマートフォン案件などでアイコンを使用する際Webfontを導入すると解像度とか色とか考えなくていいから楽。

商用可のアイコンWebfont

• Fontello

とかで矢印アイコンをダウンロードして使用。

導入方法

1. FontelloでWebfontをダウンロード・fontフォルダとかを作って格納
2. cssファイルに以下を記述（webfontをダウンロードした際に同梱されているものを参考）

   @font-face {
   	font-family: 'fontello';
   	src: url("../font/fontello.eot");
   	src: url("../font/fontello.eot?#iefix") format('embedded-opentype'), url("../font/fontello.woff") format('woff'), url("../font/fontello.ttf") format('truetype'), url("../font/fontello.svg#fontello") format('svg');
   	font-weight: normal;
   	font-style: normal;
   }
   [class^="icon-"]:before,
   [class*=" icon-"]:before {
   	font-family: 'fontello';
   	font-style: normal;
   	font-weight: normal;
   	speak: none;
   	display: inline-block;
   	text-decoration: inherit;
   	width: 1em;
   	margin-right: 0.2em;
   	text-align: center;
   	opacity: 0.7;
   }
   

3. リストとかの要素の:beforeとか:afterに使用

   	.list li a:after {
   		font-family: 'fontello';
   		color:#666666; /* アイコンの色味 */
   		content: 'e75e';　 /* アイコンの種類の指定 */
   	}
   

:afterを使用するとコンテンツのすぐ横にアイコンが配置されるため、リストなどで横幅が可変で常にアイコンを右寄せかつ縦中央に配置しておきたい場合はcssのtable-cellを使用

html

<ul>
	<li><a href="#"><div class="wrap">hogehoge</div></a></li>
	<li><a href="#"><div class="wrap">hogehoge</div></a></li>
	<li><a href="#"><div class="wrap">hogehoge</div></a></li>
</ul>

css

	.list li a {
		display:table;
		width:100%;
	}
	.list li a .wrap {
		display:table-cell;
		width:auto;
		padding:10px; /* 余白調整 */
	}
	.list li a:after {
		font-family: 'fontello';
		color:#666666;
		content: 'e75e';
		display:table-cell;
		vertical-align:middle; /* 文章が2行以上になった場合のアイコンの縦中央寄せ */
		width:15px; /* アイコンの大きさ分横幅指定 */
	}