Twitter Bootstrap - 使CSS图标更大

Question

我正在使用Twitter Bootstrap，它说如果我想使用他们的CSS精灵中的图标，请使用<i class="icon-flag"></i>。

如何添加我自己的名为 .logo-icon 的 css 类，该类将采用他们的图标之一但使其更大？

我的班级目前看起来像：

.logo-icon {
    background-image: url("../img/glyphicons-halflings-white.png");
    background-position: -312px -24px;
}

Answer 1

最好和最简单的

是更改span标签的字体大小

span.glyphicon {
    font-size: 8px;  
}

或

<span class="glyphicon glyphicon-check" style="font-size: 1.2em"></span>

使用字体真棒？

如果像我一样，你也使用FontAwesome，你可以混合;)使用这些类

<span class="glyphicon glyphicon-check fa-lg"></span>
<span class="glyphicon glyphicon-check fa-2x"></span>
<span class="glyphicon glyphicon-check fa-3x"></span>
<span class="glyphicon glyphicon-check fa-4x"></span>

Answer 2

如果你使用scale（）怎么办???

.logo-icon {
    transform:scale(2.0,2.0);
    -ms-transform:scale(2.0,2.0); /* IE 9 */
    -moz-transform:scale(2.0,2.0); /* Firefox */
    -webkit-transform:scale(2.0,2.0); /* Safari and Chrome */
    -o-transform:scale(2.0,2.0); /* Opera */
}

它不是更容易使用和维护吗？您可以缩放到所需的任何大小，而无需重新计算背景大小和位置。

我正在使用它来减小系统某些部分的图标大小。我花了大约 1 个小时寻找减少的解决方案，几乎忘记了 scale（）。所以，只是分享以帮助他人。=D

但是，当然，如果你把它们变大，你不会得到一个完美好看的图标。

Answer 3

它看起来不像使用FontAwesome（这是一种实际字体）那么好看，但您可以使用background-size属性缩放字形。 这还需要按相同的因子缩放所有其他值，这意味着您不能只这样做，而是需要一次对一个图标执行此操作。

例如，将标志图标加倍将是：

.icon-flag.logo-icon {
  width: 28px;  // 14px * 2
  height: 28px; // 14px * 2
  background-size: 938px 318px;  // original dimensions * 2
  background-position: -624px -48px;  // original position * 2
}

如果您确实想对任意图标执行此操作，则最好使用 LESS，因为您可以通过编程方式生成它。 就个人而言，我认为切换到FontAwesome是更好的选择。

Answer 4

我更喜欢简单地更改字体大小：

.large-icon {
  padding: 11px 15px;
  font-size: 40px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}