glyph-icon size within a tab - html

Question

http://jsfiddle.net/r9dunwzs/1/
<ul id="myTab" class="nav nav-tabs">
<li class="active">one</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:
but when I increase the font-size my tabs get deformed:
How can I increase the glyph-icon size without deforming my tabs ?

Answer 1

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">one</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