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

Posted 2023-03-06

【中文标题】Twitter Bootstrap 和比按钮中的标准图标更大

【英文标题】：Twitter Bootstrap and bigger than a standard icon in the button

【发布时间】：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 以覆盖默认行为：

图片的网址 图片的宽度和高度 将 line-height 更改为图片高度 页边距（如果需要）

.

.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 上再添加一行与新图标的确切位置。

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

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