空タグの使用は避けたいと考えているのに i の空タグを使う例ばかりで。。。

header に挿入

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

バージョンは注意！

HTML部分

<ul id="faSample">
<li id="ic01">コンテンツ01</li>
<li id="ic02">コンテンツ02</li>
<li id="ic03">コンテンツ03</li>
</ul>

CSSで指定

#faSample li:before{
 display:inline-block; /* テキストの縦の並びを揃えるため */
 width:1em;
 margin-right:3px;
 font-family:'FontAwesome';
 color:#999;
}
#ic01:before{ content:'\f17a'; }
#ic02:before{ content:'\f179'; }
#ic03:before{ content:'\f17b'; }

Unicode の一覧はこちら

サンプル

• コンテンツ01
• コンテンツ02
• コンテンツ03

[mokurenCB]