增加Bootstrap 2.3的Glyphicons大小

Question

有没有一种简单的方法可以增加Glyphicons的大小？
我找到了一些解决方案，例如Font Awesome，但不想包含新的CSS库只为了将2个图标的大小增加。

- Himanshu Yadav

---

只需使用Font Awesome，如果icnfnt.com暂时无法访问，您应该能够对其进行子集化。 - millimoose

+1 提及 Font Awesome，我喜欢这个库！ - craftsman

http://weloveiconfonts.com/ 是一个很好的图标字体 CDN。 - André Dion

请注意，Bootstrap的“Glyphicons”不像Font Awesome那样是“字体图标”。它们只是PNG背景精灵。正如其他答案所提到的，它不会很好地缩放。您可以通过LESS将Font Awesome CSS与Bootstrap组合使用。您还可以修改它以仅包括您想要的图标，以帮助减少CSS文件大小。 - jmbertucci

Answer 1

将 <span> 标签的字号设置为适当大小对我很有帮助

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

- user2686734

---

这应该是正确的方法吗？ - Jean-Christophe Meillaud

工作。翡翠代码： span(style="font-size:24px").glyphicon.glyphicon-info-sign。该代码用于在网页中显示一个大小为24px的信息图标。 - Tarion

注意，OP提到的是Bootstrap 2.3，而这个解决方案适用于使用字体而非精灵图的Bootstrap 3+。已编辑帖子以反映此信息。 - Brian Jordan

这适用于Bootstrap 3。 - Furkat U.

真棒，易于操作且简单！ - AlvaroAV

Answer 2

自Bootstrap 3起，字形图标已更改为字体而不是精灵。 这样可以使您更加灵活。例如，您只需设置font-size并继续进行。

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

或者您可以直接编写一个修改器类：

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

- Umur Kontacı

Answer 3

只需要将字体大小设置大一些就好了 :)

第一种方法 （将字体大小直接设置到元素上）

<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给我的评论，您可以将上述内容与其他图标容器一起使用。

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>

- Dwza

---

这仅适用于Bootstrap 3版本，请注意原问题询问的是2.3版本。 - Brian Jordan

@BrianJordan 实际上是一样的...唯一的区别是图标容器...但为了避免混淆，我会更新我的帖子。 - Dwza

使用Bootstrap 2.3增加font-size似乎无法改变图标大小http://jsfiddle.net/Lk5vd/ - Brian Jordan

哦，你是对的:D抱歉...也许他使用了比例尺，但这会产生不好的结果:D - Dwza

Answer 4

这是在Bootstrap 2.3中增加图标大小的一种方法。正如我在评论中指出的那样，结果会相当糟糕，因为你正在缩放精灵图像。

JSFiddle演示

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

考虑使用Fontello代替，它们允许你基于所选图标生成自定义字体。

- Rajender Joshi

---

“我不想包含另一个CSS库”的解决方案是“包含另一个CSS库”？ - millimoose

可以增加Glyphicons的大小，但这将导致图标质量相当糟糕，因为Bootstrap使用此精灵来生成图标。 - Rajender Joshi

虽然OP的要求可能有些愚蠢，但这个答案仍然与之相反。（另外，更好的选择是对Font Awesome进行子集化，因为它与Bootstrap兼容，尽管执行此操作的网站似乎已经关闭。） - millimoose

http://icomoon.io/是一个更好的工具。它让您能够像Fontello一样进行操作，并且拥有导入和修改自定义图标的额外优势。 - Axel

@Axel，fontello已经支持SVG导入。它的界面允许您立即看到图标在文本旁边的效果。这在选择合适风格的图标时非常方便。 - Vitaly

Answer 5

您可以使用：

.icon-whatever {
    zoom: 2;
    -moz-transform: scale(2);  /* Firefox */
}

然而，当您放大图像时，它会变得模糊不清，因为它正在缩放图像。使用字体图标库将具有更好的缩放效果。

- dave

Answer 6

您可以覆盖 Bootstrap 的 class，例如:

// Size and position are not working.
.icon-glass {
  background-size: 800px;
  backgroung-position: 10px 50px;
  width: 24px;
  height: 24px;
}

问题在于图标由于分辨率会显得模糊不清。

希望这有所帮助！

- cortex

Answer 7

如果您想在按钮中使用图标，则非常简单：

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star"></span>
</button>

btn-lg定义了按钮的大小。您可以使用btn-lg、btn-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;}

- kinske

Answer 8

您可以使用IcoMoon.io，这是一个非常易于使用的工具，用于生成不同颜色、大小的图标字体，甚至可以从您的选择中生成精灵。

- itsbalamurali

Answer 9

如果您正在使用Bootstrap 3，为什么不在图标上使用em宽度？ 如果图标嵌入标题/段落/正文等中，则使用em字体大小将相对于它们所在的段落增加图标的大小。

例如，如果您有：

<span class="glyphicon glyphicon-adjust"></span>

在自定义Bootstrap的CSS中，只需添加以下内容：

.glyphicon {font-size: 1.25 em;}

这将缩放字形。

- David Peters

---

问题可能是关于Bootstrap 2.3的，它仍然使用精灵图而不是字体。尽管如此，原帖作者应该提到这一点。 - cthulhu

Answer 10

我发现了一种非常简单的方法——使用“transform”。例如，将以下代码放置在页面中：

.glyphicon-chevron-right {transform:scale(2.9,2.9);}

在你的CSS中将其增加2.9倍。

- Gabriel