Twitter Bootstrap - 使CSS图标更大

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (65)

我使用的是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;
}
提问于
用户回答回答于

它看起来不像使用FentAwome(这是一个实际的字体)那么好,但是你可以使用背景尺寸属性。这还需要将所有其他值按相同的因子进行缩放,这意味着不能只是一般地这样做,而是需要一次只对一个图标进行缩放。

例如,将标志图标加倍将是:

.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
}

如果确实想要对任意图标执行此操作,则最好使用可能以编程方式生成此图标的较少的图标。就我个人而言,我认为转到FentAwome是更好的选择。

用户回答回答于

最好,最简单

是改变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>

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励