如何让Glyphicons更大？ （改变尺寸？）

Question

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

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

Answer 1

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

.glyphicon {
    font-size: 50px;
}

仅定位一个图标，

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

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>  

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

Answer 4

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

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

Answer 5

对于前... 添加类：

btn-lg - LARGE

btn-sm - SMALL

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

Answer 6

我已经为此使用了bootstrap头类（“h1”，“h2”等）。这样，您可以在不使用实际标签的情况下获得所有样式优势。这是一个例子：

background