如何使 Glyphicons 更大？ （改变大小？）

Posted 2023-03-06

【中文标题】如何使 Glyphicons 更大？ （改变大小？）

【英文标题】：How Do I Make Glyphicons Bigger? (Change Size?)

【发布时间】：2014-09-17 13:43:53

【问题描述】：

我想让地球字形图标更大，以便它覆盖页面的大部分（它是矢量图像）。它不在按钮或任何东西中；它只是一个人。有没有办法做到这一点？

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

【问题讨论】：

Bigger Glyphicons的可能重复

【参考方案1】：

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

.glyphicon 
    font-size: 50px;

只定位一个图标，

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

【讨论】：

text-center 在 div 上。

要使字形“按需”变大，请使用 .glyphicon.larger font-size: 150%;

让它变薄怎么样？

我必须在字体大小中添加 !important; 以覆盖 boostrap CSS。

【参考方案2】：

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

我实现了相同的。就在你的主 .css 文件上添加这个

.gi-2xfont-size: 2em;
.gi-3xfont-size: 3em;
.gi-4xfont-size: 4em;
.gi-5xfont-size: 5em;

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

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

【讨论】：

不错！您还可以使用小数，例如 1.5em。

比公认的答案要好得多，并为反复出现的问题提供了通用解决方案。

【参考方案3】：

如果你使用 bootstrap 和 font-awesome 那就很简单了，不需要写一行新代码，只需添加 fa-Nx，任意大小，See the demo

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

【讨论】：

Glyphicons 和 Font-Awesome 联手！

我不赞成将 FA 和 Glyphicons 结合起来。请参阅下面的答案，了解如何使用内联样式或通过上面的 css 类来放大字形图标。或者对于纯 FA 解决方案，使用 -> fa fa-globe fa-2x (v4.x)

MarcoZen：无论如何，到下一个版本的 bootstrap 4 Glyphicons 将被删除，我们之前的许多人都在一起使用。

【参考方案4】：

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

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

【参考方案5】：

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

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

【讨论】：

你可以这样做，但它不会像一点点 CSS 那样给你很好的控制水平。

由于它们对字体大小的影响而使用标题是一种反模式。当屏幕阅读器认为它表示页面上最重要内容的标题/标题时，通过键盘导航您的网站的用户将被直接发送到您的图标。

【参考方案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> 

参考链接引导程序：Glyphicons Bootstrap

【讨论】：

问题将图像而不是图像视为按钮。

【参考方案7】：

为此，我使用了引导头类（“h1”、“h2”等）。这样，您无需使用实际标签即可获得所有样式优势。这是一个例子：

<div class="h3"><span class="glyphicon glyphicon-tags" aria-hidden="true"></span></div>