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

239

我想将球形glyphicon增大，使其覆盖页面的很大一部分（这是矢量图像）。它不在按钮或其他任何东西中；只是一个人。有没有办法做到这一点？

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

— 编码员
source

更大的Glyphicons的

— Kevin Workman'8

367

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

.glyphicon {
    font-size: 50px;
}

要仅定位一个图标，

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

— 毒液商人
source

2

可行！（我会在5分钟内（剩下的时间）接受它）有没有办法使它居中？@VenomVendor

— CoderBryan 2014年

2

text-center在div。

— Aibrean 2014年

7

为了使字形变大“按需”，请使用.glyphicon.larger {font-size：150％; }

— user216661 '16

如何使其更薄呢？

— Nofel

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

— 与此同时

143

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>

— 克劳利先生
source

真好！您也可以使用小数，例如1.5em。

— Mike Taverne

比接受的答案好得多，它显示了针对重复出现的问题的通用解决方案。

— 亚当

71

如果您使用的是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）
source

Glyphicons和Font-Awesome联手！

— Timo

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

— MarcoZen 18'Apr

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

— Ali Adravi '18

17

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

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

— 特耶·索莱姆（Terje Solem）
source

11

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

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

— Bagus Cahyono
source

2

您可以执行此操作，但是并不能像CSS那样给您精细的控制。

— MattD

6

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

— 罗伊

9

对于前..添加类：

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：Glyphicons Bootstrap

— OpenWebWar
source

7

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

— user216661 '16

0

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

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

— 亚历克斯·科兹洛夫（Alex Kozlov）
source