图标和文字不是并排导航栏与刀片

Question

使用laravel Web应用程序处理twiiter引导程序。问题是图标和文字不是并排的。我不确定问题是什么，所以希望能有人帮助我。 img图片是24x24。像这样：

它适用于此（仅限HTML，引导程序），而非刀片代码：http://jsfiddle.net/aFtQ9/2/

default.blade.php

<!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
            {{-- <a class="navbar-brand" href="#">Norges Idrettshøgskole</a> --}}
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
           <li class='{{ ($aktiv == 'hvertime') ? 'active' : '' }}'> <a class='home'>{{HTML::linkRoute('hvertime','Forside')}}</a> </li>
           <li class='{{ ($aktiv == 'hvertredjetime') ? 'active' : '' }}'> <a class='home'>{{HTML::linkRoute('hvertredjetime','Måling')}}</a> </li>
            <li @if($aktiv == 'gjoremal'){{ "class='active'" }}@endif>{{HTML::linkRoute('gjoremal','Daglige Oppgaver')}} </li>
            <li @if($aktiv == 'dagvakt'){{ "class='active'" }}@endif>{{HTML::linkRoute('dagvakt','Dagvakt')}}</li>
            <li @if($aktiv == 'kveldsvakt'){{ "class='active'" }}@endif>{{HTML::linkRoute('kveldsvakt','Kveldsvakt')}}</li>
            <li @if($aktiv == 'kontrollcm'){{ "class='active'" }}@endif>{{HTML::linkRoute('kontrollcm','Kontroll CM')}}</li>
            <li @if($aktiv == 'sok'){{ "class='active'" }}@endif>{{HTML::linkRoute('sok','Søk')}}</li>  
              {{--  <li @if($aktiv == 'diagrammer'){{ "class='active'" }}@endif>{{HTML::linkRoute('diagrammer','Diagrammer')}}</li>  --}} 
              {{--  <li @if($aktiv == 'rapport'){{ "class='active'" }}@endif>{{HTML::linkRoute('rapport','Rapport')}}</li>  --}} 

          </ul>

        </div><!--/.nav-collapse -->
      </div>
    </div>

的main.css

.navbar-default .navbar-nav>.active>a:before,
.navbar-nav>li>a:before {
    background-repeat: no-repeat;
    background-position: 0 top;
    content: "";
    display: inline-block;
    height: 29px;
    margin-right: 10px;
    vertical-align: middle;
    width: 29px;
}

.navbar-default .navbar-nav>.active>a.home:before,
.navbar-nav>li>a.home:before { background-image: url('http://i.imgur.com/j2s9NKB.png'); }