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

谢谢。

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