选项卡中的字形图标大小

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中所看到的，我在引导程序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