Twitter Bootstrap，比按钮中的标准图标大

Question

使用时，一切都很完美：

<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％。怎么解决？ 改变高度或填充没有帮助。

谢谢。

Answer 1

最好的方法是扩展 bootstrap 图标精灵，然后在css上添加一行以及新图标的确切位置。

搜索其中一个引导程序图标并添加下面的内容。

如果我的图标更大，我也总是以这种方式做，只改变你的宽度/高度。

Answer 2

创建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。