19

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

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

我的班级目前看起来像：

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

4 回答 4

45

最好和最简单的

是改变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>
于 2014-08-11T08:56:02.470 回答
14

如果你使用 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

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

于 2013-02-05T17:56:50.177 回答
13

它看起来不像使用 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 是更好的选择。

于 2012-11-24T19:16:43.913 回答
0

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

.large-icon {
  padding: 11px 15px;
  font-size: 40px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
于 2014-07-07T00:26:56.203 回答