如何让Glyphicons变大？（改变大小？）

Question

我想让地球字体图标变大，以便它覆盖页面的大部分区域（它是矢量图像）。它不在按钮或其他任何东西中；它是单独的。有没有办法做到这一点？

<div class = "jumbotron">
    <span class="glyphicon glyphicon-globe"></span>
</div>  

- CoderBryan

---

可能是 Bigger Glyphicons 的重复问题。 - Kevin Workman

Answer 1

将 glyphicon 的字体大小增加以增加所有图标的大小。

.glyphicon {
    font-size: 50px;
}

只针对一个图标进行定位，

.glyphicon.glyphicon-globe {
    font-size: 75px;
}

- VenomVendor

---

在 div 上使用 text-center。 - Aibrean

为了按需放大字体图标，请使用以下代码：.glyphicon.larger { font-size: 150%; } - user216661

让它变得更薄怎么样？ - localhost

我不得不在字体大小上添加!important;以覆盖boostrap CSS。 - MeanwhileInHell

Answer 2

Fontawesome有一个完美的解决方案。

我也实现了相同的功能。只需在您的主 .css 文件中添加以下内容：

.gi-2x{font-size: 2em;}
.gi-3x{font-size: 3em;}
.gi-4x{font-size: 4em;}
.gi-5x{font-size: 5em;}

在您的示例中，您只需要这样做。

<div class = "jumbotron">
    <span class="glyphicon glyphicon-globe gi-5x"></span>
</div>  

- Mr. Crowley

---

不错！您还可以使用像1.5em这样的分数。 - Mike Taverne

比被接受的答案好得多，展示了一种通用解决方案来解决经常出现的问题。 - Adam

Answer 3

如果您正在使用 Bootstrap 和 Font Awesome，那么很容易，无需编写任何新代码，只需添加 fa-Nx，大小任您选择。 查看演示

<span class="glyphicon glyphicon-globe"></span>
<span class="glyphicon glyphicon-globe fa-lg"></span>
<span class="glyphicon glyphicon-globe fa-2x"></span>
<span class="glyphicon glyphicon-globe fa-3x"></span>
<span class="glyphicon glyphicon-globe fa-4x"></span>
<span class="glyphicon glyphicon-globe fa-5x"></span>

- Ali Adravi

---

Glyphicons和Font-Awesome联手！ - Timo

我不赞成将FA和Glyphicons结合在一起。请参见下面的答案，了解如何使用内联样式或通过上方的CSS类来放大glyphicon。或者，对于纯FA解决方案，请使用-> fa fa-globe fa-2x（v4.x）。 - MarcoZen

MarcoZen：无论如何，在下一个版本的Bootstrap 4中，Glyphicons都将被删除，而我们许多人以前都在一起使用它们。 - Ali Adravi

Answer 4

是的，基本上您也可以使用内联样式：

<span style="font-size: 15px" class="glyphicon glyphicon-cog"></span>

- Terje Solem

Answer 5

尝试使用标题，不需要额外的CSS

<h1 class="glyphicon glyphicon-plus"></h1>

- Bagus Cahyono

---

你可以这样做，但它无法像少量的CSS那样给你精细的控制。 - MattD

因为字体大小的影响而使用标题是一种反模式。通过键盘浏览您的网站的用户将直接被发送到您的图标，因为屏幕阅读器会假定它表示页面上最重要内容的标题/标题。 - Roy

Answer 6

例如...添加类:

btn-lg - 大号

btn-sm - 小号

btn-xs - 极小号

<button type=button class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button> 

<button type=button class="btn btn-default">
<span class="glyphicon glyphicon-star" aria-hidden=true></span>Star
</button>

 <button type=button class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button> 

<button type=button class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button> 

Bootstrap 参考链接: Bootstrap 图标字体

- OpenWebWar

---

这个问题涉及到图片本身，而不是将图片作为按钮的情况。 - user216661

Answer 7

我使用了Bootstrap的标题类（“h1”，“h2”等）来实现这个效果。这样，您就可以获得所有的样式优势，而不必使用实际的标签。以下是一个示例：

- Alex Kozlov