Question

这似乎是一项简单的任务，但我在网上尝试了所有内容而不缺乏。

如何调整Bootstrap 2.3.2图标的大小？

<i class="icon-search"></i>

Answer 1

Bootstrap 2为其所有图标使用一个巨大的精灵图片，并在html元素上设置为background-image。 font-size在这种情况下不起作用。您必须使用background-size和background-position值以及元素的宽度/高度。

＆＃13;

.smaller {
  width: 50px;
  height: 50px;
  background-size: 2000%;
  background-position: 0px 0px;
}

.bigger {
  width: 100px !important;
  height: 100px !important;
  background-size: 2000% !important;
  background-position: 0px 0px;
}

.another-icon {
  width: 100px !important;
  height: 100px !important;
  background-size: 2000% !important;
  background-position: -200px 0px !important;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" /> smaller: <i class="icon-glass smaller"></i>
<br /> original:
<i class="icon-glass"></i>
<br /> bigger:
<i class="icon-glass bigger"></i>

<br /> another icon:<i class="icon-glass another-icon"></i>

＆＃13;

正如您所看到的，因为它是一个图像，它不能很好地扩展。考虑升级到较新的引导程序版本。

这是图标的精灵表：

＆＃13;

i {
  width:530px !important;
  height: 200px !important;
  background-size: 100% !important;
  background-position: 0px 0px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />

<i class="icon-glass"></i>

＆＃13;

Answer 2

我不熟悉bootstrap，但它将是样式表中的一个元素而不是html。你也可以做内联风格。

<i class="icon-search" style="width:10px; height:10px;"></i>

Answer 3

您是否尝试过调整标签的字体大小？像这样：

<i class="icon-search font-adjust></i>

然后在你的CSS中添加：

.font-adjust {
    font-size: 24px
}

如何成功调整Bootstrap 2.3.2图标的大小？

3 个答案: