增加 Bootstrap 2.3 的 Glyphicons 的大小答案

【问题标题】：Increase the size of Bootstrap 2.3's Glyphicons增加 Bootstrap 2.3 的 Glyphicons 的大小
【发布时间】：2013-05-02 00:46:48
【问题描述】：

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

【问题讨论】：

只要使用 Font Awesome，如果 icnfnt.com 中断是暂时的，您应该能够对其进行子集化。
+1 提到 Font Awesome，我喜欢这个库！
weloveiconfonts.com 也是一个不错的图标字体 CDN。
请注意，Bootstrap 的“Glyphicons”不是像 Font Awesome 那样的“字体图标”。它们只是一个 PNG 背景精灵。正如其他答案所提到的，它不会很好地扩大规模。你可以通过 LESS 将 Font Awesome CSS 与 Bootstrap 结合起来。您还可以对其进行修改以仅包含您想要的图标，以帮助减小 CSS 文件大小。

标签： javascript jquery css twitter-bootstrap

【解决方案1】：

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

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

【讨论】：

应该是这样的吧？
有效。玉码：span(style="font-size:24px").glyphicon.glyphicon-info-sign
注意，OP 询问 bootstrap 2.3 此解决方案适用于使用字体而不是 spritesheet 的 bootstrap 3+。编辑帖子以反映这一点。
这适用于 bootstrap 3
棒极了，简单易行！

【解决方案2】：

从 Bootstrap 3 开始，字形图标已更改为字体而不是精灵。这为您提供了更大的灵活性。例如，您可以设置 font-size 并继续。

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

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

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

【讨论】：

【解决方案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

根据您的问题和布兰登给我的评论，您可以将上述内容与其他图标 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>

【讨论】：

这仅适用于 Bootstrap 3，请注意原始问题询问的是 2.3 版。
@BrianJordan 实际上是一样的......唯一的区别是图标容器......但是你会更新我的帖子，所以不会有混淆
使用 bootstrap 2.3 增加 font-size 似乎不会改变图标大小 jsfiddle.net/Lk5vd
哦，你是对的 :D 对不起......他可能会使用规模，但这种结果很糟糕 :D

【解决方案4】：

这是在 Bootstrap 2.3 中增加图标大小的一种方法。正如我在评论中指出的那样，结果会很差，因为您正在缩放 spritesheet 图像。

JSFiddle demo

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

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

【讨论】：

所以“我不想包含另一个 CSS 库”的解决方案是“包含另一个 CSS 库”？
没有。是的，可以增加 Glyphicons 的大小，但这会导致图标非常糟糕，因为 Bootstrap 使用这个 Sprite 来生成图标。
虽然 OP 的要求可能很愚蠢，但这个答案仍然与之背道而驰。（此外，更好的选择是对 Font Awesome 本身进行子集化，因为它与 Bootstrap 兼容，尽管这样做的网站似乎已关闭。）
icomoon.io 更好。它可以让您做 Fontello 所做的事情，并具有导入和修改您自己的自定义图标的额外好处。
@Axel，fontello 已经支持 svg 导入。它的界面允许您立即查看图标在文本附近的外观。当您选择合适样式的图标时，这很方便。

【解决方案5】：

你可以使用：

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

但是，随着图像放大，它看起来会越模糊。字体图标库会更好地扩展。

【讨论】：

【解决方案6】：

你可以覆盖bootstrap的类，例如：

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

问题是图标会因为分辨率而显得难看。

希望这会有所帮助！

【讨论】：

【解决方案7】：

如果您将字形图标用于按钮，则非常简单：

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

【讨论】：

【解决方案8】：

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

【讨论】：

【解决方案9】：

我刚刚找到了一种非常简单的方法——使用“变换”。例如，地点：

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

在你的 CSS 中增加 2.9 倍。

【讨论】：

【解决方案10】：

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

例如，如果您有：

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

在自定义引导程序的 css 中，只需添加：

.glyphicon {font-size: 1.25 em;}

这将缩放字形。

【讨论】：

问题（可能）是关于 Bootstrap 2.3，它仍然使用精灵而不是字体。不过，OP 应该提到这一点。

【解决方案11】：

尝试包含类lead

<span class="glyphicon glyphicon-home lead"></span>

或者在<h4>标签内说唱

【讨论】：