html - 选项卡内的字形图标大小

Question

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>

正如您在 jsFiddle 中看到的那样，我在增加 bootstrap 3 选项卡中图标的字体大小时遇到​​了问题。

预期的行为如下:

但是当我增加字体大小时，我的标签会变形:

如何在不使标签变形的情况下增加字形图标的大小？

Answer 1

在图标的a href中添加一个类，并为图标设置一个新的行高

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