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

Question

这似乎是一件容易的事，但我尝试了网络上的所有东西。

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

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

Answer 1

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

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

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

如您所见，因为它是一张图片，所以缩放比例不佳。考虑升级到更新的 Bootstrap 版本。

这是图标的 sprite 表:

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

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

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