Twitter Bootstrap 和比按钮中的标准图标更大答案

【问题标题】：Twitter Bootstrap and bigger than a standard icon in the buttonTwitter Bootstrap 和比按钮中的标准图标更大
【发布时间】：2012-09-03 09:40:03
【问题描述】：

当我使用时，一切都很完美：

<button type="submit" class="btn btn-primary">
  <i class="icon-user icon-white"></i> text
</button>

我想要我自己的图标。这就是我使用的原因：

<button type="submit" class="btn btn-primary">
  <i class="icon-school icon-white"></i> text
</button>

我的图标显示在按钮中，但我的图标有点高（20px x 16px）。因此，它显示为 75%。如何解决？更改高度或填充没有帮助。

谢谢。

【问题讨论】：

为了简单的生活，也许可以将您的图标调整为与默认引导图标相同的大小？
不能那样做，那不在我的权力范围内：)
仅供大家参考：我没有找到好的解决方案。由于文本不再垂直居中，因此更改高度也无济于事。使用填充，背景位置并不能使它完美。图片的大小已减小以保持 Twitter Boostrapped。

【解决方案1】：

创建一个icon-perso 类

<button type="submit" class="btn btn-primary">
  <i class="icon-school icon-perso"></i> text
</button>

添加以下 css 以覆盖默认行为：

.icon-perso {
  background-image: url("../img/glyphicons-perso.png");
  width: 20px;
  height: 16px
  line-height: 16px;
}

如果您的图片包含多个图标，例如 glyphicons-halflings.png，您可能需要更改背景位置

.icon-school {
  background-position: 0px 0px;
}

如果您有兴趣，可以查看第 2143 行附近的 bootstrap.css。

【讨论】：

【解决方案2】：

最好的方法是扩展 bootstrap 图标精灵并在 css 上再添加一行与新图标的确切位置。

搜索其中一个引导图标并添加您的下方。

如果我的图标更大，我也总是这样做，只需更改您唯一的宽度/高度即可。

【讨论】：