Twitter Bootstrap - 使CSS图标更大

Question

我正在使用Twitter Bootstrap,<i class="icon-flag"></i>如果我想使用CSS精灵中的图标,它就会使用它.

如何添加我自己的css类.logo-icon,它将采用其中一个图标但是将其设置得更大？

我的班级目前看起来像:

.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属性缩放glyphicons .这也需要通过相同的因子来扩展所有其他值,这意味着您不能一般地执行此操作,但是需要一次为单个图标执行此操作.

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

.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是更好的选择.