Html 我如何使 Glyphicons 更大？（改变大小？）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24960201/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How Do I Make Glyphicons Bigger? (Change Size?)
提问by CoderBryan
I would like to make the globe glyphicon bigger so that it covers up a large portion of the page (it's a vector image). It's not in a button or anything; it's just alone. Is there a way to do this?
我想让地球字形更大，以便它覆盖页面的大部分（它是矢量图像）。它不在按钮或任何东西中；它只是一个人。有没有办法做到这一点？
<div class = "jumbotron">
<span class="glyphicon glyphicon-globe"></span>
</div>
回答by VenomVendor
Increase the font-size of glyphiconto increase all icons size.
增加字体大小glyphicon以增加所有图标的大小。
.glyphicon {
font-size: 50px;
}
To target only one icon,
要仅定位一个图标，
.glyphicon.glyphicon-globe {
font-size: 75px;
}
回答by Mr. Crowley
Fontawesome has a perfect solution to this.
Fontawesome 对此有一个完美的解决方案。
I implemented the same. just on your main .css file add this
我实现了相同的。就在你的主 .css 文件上添加这个
.gi-2x{font-size: 2em;}
.gi-3x{font-size: 3em;}
.gi-4x{font-size: 4em;}
.gi-5x{font-size: 5em;}
In your example you just have to do this.
在你的例子中，你只需要这样做。
<div class = "jumbotron">
<span class="glyphicon glyphicon-globe gi-5x"></span>
</div>
回答by Ali Adravi
If you are using bootstrap and font-awesome then it is easy, no need to write a single line of new code, just add fa-Nx, as big you want, See the demo
如果你使用的是 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>
回答by Terje Solem
Yes, and basically you can also use inline style:
是的，基本上你也可以使用内联样式：
<span style="font-size: 15px" class="glyphicon glyphicon-cog"></span>
回答by Bagus Cahyono
try to use heading, no need extra css
尝试使用标题，不需要额外的 css
<h1 class="glyphicon glyphicon-plus"></h1>
回答by OpenWebWar
For ex .. add class:
例如..添加类：
btn-lg - LARGE
btn-lg - 大
btn-sm - SMALL
btn-sm - 小
btn-xs - Very 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>
Ref link Bootstrap : Glyphicons Bootstrap
参考链接 Bootstrap：Glyphicons Bootstrap
回答by Alex Kozlov
I've used bootstrap header classes ("h1", "h2", etc.) for this. This way you get all the style benefits without using the actual tags. Here is an example:
为此，我使用了引导程序头类（“h1”、“h2”等）。通过这种方式，您无需使用实际标签即可获得所有样式优势。下面是一个例子：
<div class="h3"><span class="glyphicon glyphicon-tags" aria-hidden="true"></span></div>
<div class="h3"><span class="glyphicon glyphicon-tags" aria-hidden="true"></span></div>
