最好最简单

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？

如果像我一样你也使用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，您可以以编程方式生成此LESS。就个人而言，我认为切换到FontAwesome是更好的选择。

Answer 4

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

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

Twitter Bootstrap - 使CSS图标更大

4 个答案:

最好最简单

使用FontAwesome？