Bootstrap: invisible glyphicon with same width of normal glyphicon

Question

imagine i have the following dropdown menu in a navbar:

      <ul class="dropdown-menu">
        <li><a href="#"><span class="glyphicon glyphicon-invisible"></span> Test 1</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-stop"></span> Test 2 (Active)</a></li>
      </ul>

I want to mark the active item with a glyphicon. The non active item with "Test 1" should have the same indentation as the active item "Test 2". I tried to reach this goal by adding a non existing glyphicon. This was possible with Boostrap 3.0.3 but in the new version 3.1.0 this "trick" is not working anymore.

With ASCII and Bootstrap 3.0.3:

    [IMAGE] Test 1
            Test 2

With ASCII and Bootstrap 3.1.0:

    [IMAGE] Test 1
    Test 2

Answer 1

You can try something like...

.glyphicon{
    min-width: 15px;    
}

DEMO