glyph-icon 选项卡内的大小

Question

<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.

中增加选项卡内图标的字体大小时遇到问题

预期行为如下：

但是当我增加 font-size 时，我的标签变形了：

如何在不使标签变形的情况下增加 glyph-icon 大小？

Answer 1

在图标的 href 中添加 class 并为图标设置新的行高

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

glyph-icon 选项卡内的大小

glyph-icon size within a tab

html

css

twitter-bootstrap

glyphicons