将导航栏图标与bootstrap 3中的文本对齐？

Question

我正在使用bootstrap 3.这是我的html：

如您所见，star和BookMarks文本与其他导航栏不一致。 怎么解决这个问题？ 这是我的代码

<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target=".navbar-ex1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="collapse navbar-collapse navbar-ex1-collapse">
          <ul class="nav navbar-nav navbar-right">


            <li>
              <a href="/mybookmarks/">
                <span class="glyphicon glyphicon-star" id="starry"></span>
                &nbsp;BookMarks
              </a>
            </li>

            <li>
              <a href="/search/create/">
                <span class="glyphicon glyphicon-plus"></span>
                &nbsp;New Search
              </a>
            </li>

            <li>
              <a href="/dashboard/">
                <span class="glyphicon glyphicon-th"></span>
                &nbsp;Searches
              </a>
            </li>

            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <span class="glyphicon glyphicon-stats"></span>
                &nbsp;Reports <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="implement this">Raw Data</a>
                </li>
                <li>
                  <a href="implement this">Graphs</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="implement this">Email Report</a>
                </li>
              </ul>
            </li>

            <li class="dropdown active">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <span class="glyphicon glyphicon-user"></span>
                &nbsp;
                        demo <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="/accounts/settings/">Account Settings</a>
                </li>
                <li>
                  <a href="/accounts/password/change/">Change Password</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="help">Help</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="/logout/">Log Out</a>
                </li>
              </ul>
            </li>

          </ul>
        </div>
        <!-- /.navbar-collapse --> </div>
      <!-- /.container --> </nav>

和一个自定义css，用于星形glyphicon的span元素

#starry {
color: #B939A0;
font-size: 20px;
}

Answer 1

问题是由于该图标的字体大小增加引起的。

解决此问题的一种方法是：

#starry {
  color: #B939A0;
  font-size: 20px;
  float: left;
  margin: -2px 3px 0 0;
}

float将其从文档流中取出，允许文本重新对齐。然后边距重新定位图标。

<强> Demo