Align nav-bar icon with text in bootstrap 3?

Question

I am using bootstrap 3. Here is my html:

As you can see, the star and BookMarks texts are not in line with other nav-bars. how to fix this? Here is my code

<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>

and one custom css which is for the span element of star glyphicon

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

Answer 1

The problem is being caused by the increase in font-size of that one icon.

One way to resolve this would be:

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

The float takes it out of the document flow, allowing the text to realign. Then the margin repositions the icon.

Demo