Javascript 增加Bootstrap 2.3的大小'；字形图标

有没有增加图标大小的简单方法？

---

我找到了一些解决方案，比如，但不想包括新的CSS库，只是为了增加2个图标的大小。

这是在Bootstrap 2.3中增加图标大小的一种方法。正如我在评论中指出的，结果将非常糟糕，因为您正在缩放精灵表图像

---

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

您可以覆盖引导程序的类，例如：

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

问题是，由于分辨率的原因，图标看起来会很难看

希望这有帮助

您可以使用：

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

---

但是，随着图像的放大，图像越大，看起来就越模糊。字体图标库的缩放效果会更好。

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

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

---

如果您使用图标图标作为按钮，则非常简单：

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

或

---

从Bootstrap3开始，字形图标已被更改为字体而不是精灵。这给了你更多的灵活性。例如，您可以只设置

字体大小

，然后继续

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

---

如果您使用的是Bootstrap 3，为什么不在图标上使用

em

宽度？如果图标嵌入在标题/段落/正文等中，则在

em

s中使用字体大小将增加图标相对于所在段落的大小

例如，如果您有：

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

---

这将缩放图示符。

只需设置字体大小：） 您有多个选项可以执行此操作：

首先（将其直接设置到元素）

第三个（构建修改类）[我更喜欢这种可能性]

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

用法：

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

第三

.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>

.icon-x2{
-webkit转换：规模（2.0）；
-moz变换：比例（2.0）；
-o变换：比例（2.0）；
}
.icon-x3{
-webkit转换：规模（3.0）；
-moz变换：比例（3.0）；
-o变换：比例（3.0）；
}
//这里我使用上面的css（bootstrap3）
//事实上，你可以随意命名

您可以使用

---

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

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

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

---

在你的CSS中增加2.9倍。

尝试加入class

lead

---

或者将其放在

标签中，因此“我不想包含另一个CSS库”的解决方案是“包含另一个CSS库”？不。是的，字形图标的大小可以增加，但这将导致非常糟糕的图标，因为引导程序使用它来生成图标。虽然OP的要求可能很愚蠢，这个答案仍然与它背道而驰。（另外，更好的选择是将FontAwesome本身进行子集设置，因为它与Bootstrap兼容，尽管这样做的网站似乎已经关闭了。）是一个更好的选择。它让您可以像Fontello那样做，还可以导入和修改您自己的自定义图标。@Axel，Fontello已经支持svg导入。它的界面可以让你们立即看到图标在文本附近的样子。这很方便，当你选择合适风格的图标时。只需使用字体真棒，如果中断是暂时的，你应该能够将其子集。+1提到字体真棒，我很喜欢这个库！是一个很好的图标字体CDN。只需注意，引导“Glyphicons”不是像font Aware那样的“字体图标”。它们只是一个PNG背景精灵。正如其他答案所提到的，它不会很好地扩展。您可以通过更少的内存将字体可怕的CSS与引导相结合。您还可以修改它，使其仅包含您想要的图标，以帮助减少CSS文件大小。这应该是实现此目的的方法。jade代码：

span（style=“font size:24px”）.glyphicon.glyphicon信息符号

注意，OP询问bootstrap 2.3此解决方案适用于bootstrap 3+，它使用字体而不是精灵表。编辑后的文章反映了这一点。这适用于bootstrap 3Wesome，简单易用！问题（可能）在于Bootstrap2.3，它仍然使用精灵而不是字体。不过OP应该提到这一点。这仅适用于Bootstrap 3，请注意，原始问题询问的是版本2.3。@BrianJordan实际上是相同的。。。唯一的区别是图标容器。。。但是对你来说，我会更新我的帖子，这样就不会有任何混淆使用bootstrap 2.3增加字体大小似乎不会改变图标大小哦，你是对的：D对不起。。。他可能会使用天平，但这种天平会产生一个糟糕的结果：D

.glyphicon {font-size: 1.25 em;}

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

.glyphicon{
    font-size: 30px; 
}

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

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

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

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