有没有一种简单的方法可以增加 Glyphicons 的大小？
我找到了一些像Font Awesome这样的解决方案，但不想包含新的 CSS 库只是为了增加大小 2 图标。
问问题
86142 次
11 回答
71
设置 <span> 标签的字体大小对我有用
<span class="glyphicon glyphicon-ok" style="font-size: 20px;"></span>
于 2013-08-15T16:58:26.883 回答
32
从 Bootstrap 3 开始，字形图标已更改为字体而不是精灵。这为您提供了更大的灵活性。例如，您可以设置font-size并继续。
<span class="glyphicon glyphicon-adjust" style="font-size:48px;"></span>
或者您可以简单地编写一个修饰符类：
.glyphicon-2x {
font-size: 48px;
}
于 2013-09-06T07:50:56.213 回答
17
只需要设置字体大小:) 你有多个选项可以做到这一点：
首先（将其直接设置为元素）
<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>
有更多的选择可以让第三个更小。在那里你应该阅读更多关于 少
根据您的问题和布兰登给我的评论，您可以将上述内容与其他图标 contianer 一起使用。
引导程序 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>
于 2013-10-15T14:22:18.083 回答
10
这是在 Bootstrap 2.3 中增加图标大小的一种方法。正如我在评论中指出的那样，结果会很差，因为您正在缩放 spritesheet 图像。
.test {
background-image: url("http://twitter.github.io/bootstrap/assets/img/glyphicons-halflings.png");
width: 90px;
height: 90px;
background-size: 2100px 800px;
}
请考虑Fontello。它们允许您根据您选择的图标生成自定义字体。
于 2013-05-07T22:33:16.900 回答
4
您可以使用：
.icon-whatever {
zoom: 2;
-moz-transform: scale(2); /* Firefox */
}
但是，你走的越大，它看起来越模糊，因为它正在放大图像。字体图标库将扩展得更好。
于 2013-05-07T22:43:20.700 回答
2
如果您将字形图标用于按钮，则非常简单：
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span>
</button>
btn-lg 定义大小。您可以使用 btn-lg、bnt-sm、btn-sx
编辑：如果你不使用按钮或者 lg 不够大，你可以添加一个自己的类并使用 font-size （仅在 bootstrap 3.0 中测试过）。在 bootstrap 3.0 中，字形图标以 .svg 的形式存在，因此它们看起来不会难看
例子：
<button type="button" class="btn btn-default btn-lg myGlyphicon">
<span class="glyphicon glyphicon-star"></span>
</button>
CSS：
.myGlyphicon {font-size: 120%;}
或者
.myGlyphicon {font-size: 70px;}
于 2013-09-06T07:45:37.707 回答
2
您可以使用IcoMoon.io 一个非常易于使用的工具来生成不同颜色、大小的图标字体，甚至可以从您的选择中生成精灵。
于 2013-11-21T05:39:39.727 回答
2
您可以覆盖引导程序的类，例如：
// Size and position are not working.
.icon-glass {
background-size: 800px;
backgroung-position: 10px 50px;
width: 24px;
height: 24px;
}
问题是由于分辨率的原因，图标看起来很丑。
希望这可以帮助！
于 2013-05-07T22:35:44.907 回答
1
如果您使用的是 Bootstrap 3，为什么不在em图标上使用宽度？如果图标嵌入在标题/段落/正文等中，那么在ems 中使用字体大小将增加图标相对于它们所在段落的大小。
例如，如果您有：
<span class="glyphicon glyphicon-adjust"></span>
在自定义引导程序的 css 中，只需添加：
.glyphicon {font-size: 1.25 em;}
这将缩放字形。
于 2013-09-13T16:01:50.613 回答
1
我刚刚找到了一个非常简单的方法——使用“变换”。例如，放置：
.glyphicon-chevron-right {transform:scale(2.9,2.9);}
在你的 CSS 中增加 2.9 倍。
于 2014-06-02T17:24:49.947 回答
0
尝试包括类lead
<span class="glyphicon glyphicon-home lead"></span>
或者在<h4>标签内说唱
于 2017-02-27T13:56:14.270 回答