glyph-icon size within a tab

http://jsfiddle.net/r9dunwzs/1/

<ul id="myTab" class="nav nav-tabs">
      <li class="active"><a href="#home" data-toggle="tab">one</a></li>
      <li>
          <a href="#profile" data-toggle="tab">
              <i class="glyphicon glyphicon-exclamation-sign" style="font-size: 25px"></i>
         </a>
      </li>
</ul>

As you can see in jsFiddle, I'm having problems to increase the font size of an icon within a tab in bootstrap 3.

The expected behaviour is the following:

enter image description here

but when I increase the font-size my tabs get deformed:

enter image description here

How can I increase the glyph-icon size without deforming my tabs ?

Solution

Add a class to the a href of the icon and set a new line-height to the icon

HTML

<div class="bs-docs-example">
    <ul id="myTab" class="nav nav-tabs">
      <li class="active"><a href="#home" data-toggle="tab">one</a></li>
      <li>
          <a href="#profile" data-toggle="tab" class="bicon">
              <i class="glyphicon glyphicon-exclamation-sign" style="font-size: 25px"></i>
         </a>
      </li>
    </ul>
    <div id="myTabContent" class="tab-content">
      <div class="tab-pane fade in active" id="home">
        1
      </div>
      <div class="tab-pane fade" id="profile">
        2
      </div>
    </div>
</div>

CSS

a.bicon{ padding: 0px 6px !important;

}

a.bicon i{ line-height: 1.45em !important;

}

DEMO HERE