增加Bootstrap 2.3的Glyphicons的大小

Question

有没有一种简单的方法来增加Glyphicons的大小？
我找到了像Font Awesome这样的解决方案,但不希望包含新的CSS库只是为了增加2号图标.

Answer 1

设置<span>标签的字体大小对我有用

<span class="glyphicon glyphicon-ok" style="font-size: 20px;"></span>

Answer 2

从Bootstrap 3开始,glyphicons已经变成了字体而不是精灵.这为您提供了更大的灵活性 例如,您可以设置font-size并继续前进.

<span class="glyphicon glyphicon-adjust" style="font-size:48px;"></span>

或者你可以简单地写一个修饰符类:

.glyphicon-2x {
    font-size: 48px;
}

Answer 3

只需要设置fontsize :)你有多个选项来做到这一点:

首先(直接设置为元素)

<span class="glyphicon glyphicon-search" style="font-size:30px"></span>

第二个(在css文件中设置)

.glyphicon{
    font-size: 30px; 
}

第三(构建修改类)[我更喜欢这个可能性]

.glyphicon-2x{
    font-size: 40px; 
}
.glyphicon-3x{
    font-size: 60px; 
}
...

用法:

<span class="glyphicon glyphicon-2x glyphicon-search"></span>

有更多的选择让第三个更小.你应该阅读更多关于 Less的内容

根据你的问题和brandon给我的评论,你可以使用上面的其他图标contianer.

Bootstrap 2.3

第一

<i class="icon-search" style="-webkit-transform:scale(1.8);"></i>

第二

.icon-search{
    -webkit-transform:scale(1.8);
    -moz-transform:scale(1.8);
    -o-transform:scale(1.8);
}

第三

.icon-x2{
    -webkit-transform:scale(2.0);
    -moz-transform:scale(2.0);
    -o-transform:scale(2.0);
}
.icon-x3{
    -webkit-transform:scale(3.0);
    -moz-transform:scale(3.0);
    -o-transform:scale(3.0);
}
//here i use the css from above (Bootstrap 3)
//actually you can name it like you want
<i class="icon-search icon-2x"></i>

Answer 4

这是增加Bootstrap 2.3中图标大小的一种方法.正如我在评论中指出的那样,结果将非常糟糕,因为您正在缩放spritesheet图像.

JSFiddle演示

.test {
    background-image: url("http://twitter.github.io/bootstrap/assets/img/glyphicons-halflings.png");
    width: 90px;
    height: 90px;
    background-size: 2100px 800px;
}

考虑一下Fontello.它们允许您根据您选择的图标生成自定义字体.