css - 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%。如何解决？改变高度或填充没有帮助。

谢谢你。

score 1 · Accepted Answer

最好的方法是扩展引导图标精灵并在 css 上添加一行，其中包含新图标的确切位置。

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

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

score 1 · Accepted Answer

创建一个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;
}

If you picture contain several icons like glyphicons-halflings.png you may have to change the background-position

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

You can have a look at bootstrap.css around from line 2143 if you are curious.

2 回答 2