怎样在ul li 的头顶上加上一个图标

怎么在li的上方加一个图片？ 不是上在li里面，是上方不然会把li给撑大，类似这种效果

 <ul class="nav nav-tabs" role="tablist" id="maintab">     
  <li class="active"><a href="#main_tab1"  onclick='showPage("main_tab1","trainee-info.htm")'> ABOUT</a></li>
  <li><a href="#main_tab2" onclick='showPage("main_tab2","sfunction-calendar.htm")'> #springMessage("sub-menu-tfunction-calendar")</a></li>
  <li><a href="#main_tab3" onclick='showPage("main_tab3","sfunction-my-course.htm")'> #springMessage("sub-menu-sfunction-my-course")</a></li>
  <li><a href="#main_tab4" onclick='showPage("main_tab4","my-team.htm")'>  #springMessage("sub-menu-my-team")</a></li>
</ul>

亲，为什么不用dl dd dt呢。。。

 <dl>
                <dt>
                      图片。。。
                </dt>
                <dd>
                     文字。。。
                </dd>
 </dl>

css伪类 ：before