Html 是否可以使 Font Awesome 图标大于“fa-5x”？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25719319/
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
Is it possible to make Font Awesome icons larger than 'fa-5x'?
提问by user3973427
I am using this HTML code:
我正在使用这个 HTML 代码：
<div class="col-lg-4">
<div class="panel">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-cogs fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge">
<?=db_query("SELECT COUNT(*) FROM orders WHERE customer = '" . $_SESSION['customer'] . "' AND EntryDate BETWEEN '" . date('d-M-y', strtotime('Monday this week')) . "' AND '" . date('d-M-y', strtotime('Friday this week')) . "'");?>
</div>
<div>orders this week</div>
</div>
</div>
</div>
<a href="view/orders">
<div class="panel-footer">
<span class="pull-left">View Details</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
Which creates:
这创造了：
Is it possible to make the icon larger than fa-5x? There is a lot of white space beneath it that I would like it to take up.
是否可以使图标大于fa-5x？它下面有很多空白空间，我希望它占据。
回答by David Jones
Font awesome is just a font so you can use the font size attribute in your CSS to change the size of the icon.
Font Awesome 只是一种字体，因此您可以使用 CSS 中的字体大小属性来更改图标的大小。
So you can just add a class to the icon like this:
所以你可以像这样向图标添加一个类：
.big-icon {
font-size: 32px;
}
回答by Luke
Alternatively you can edit the source and create your own incrementations
或者，您可以编辑源并创建自己的增量
FontAwesome 5
字体真棒 5
https://github.com/FortAwesome/Font-Awesome/blob/master/web-fonts-with-css/less/_larger.less
https://github.com/FortAwesome/Font-Awesome/blob/master/web-fonts-with-css/less/_larger.less
// Icon Sizes
// -------------------------
.larger(@factor) when (@factor > 0) {
.larger((@factor - 1));
.@{fa-css-prefix}-@{factor}x {
font-size: (@factor * 1em);
}
}
/* makes the font 33% larger relative to the icon container */
.@{fa-css-prefix}-lg {
font-size: (4em / 3);
line-height: (3em / 4);
vertical-align: -.0667em;
}
.@{fa-css-prefix}-xs {
font-size: .75em;
}
.@{fa-css-prefix}-sm {
font-size: .875em;
}
// Change the number below to create your own incrementations
// This currently creates classes .fa-1x - .fa-10x
.larger(10);
FontAwesome 4
字体真棒 4
https://github.com/FortAwesome/Font-Awesome/blob/v4.7.0/less/larger.less
https://github.com/FortAwesome/Font-Awesome/blob/v4.7.0/less/larger.less
// Icon Sizes
// -------------------------
/* makes the font 33% larger relative to the icon container */
.@{fa-css-prefix}-lg {
font-size: (4em / 3);
line-height: (3em / 4);
vertical-align: -15%;
}
.@{fa-css-prefix}-2x { font-size: 2em; }
.@{fa-css-prefix}-3x { font-size: 3em; }
.@{fa-css-prefix}-4x { font-size: 4em; }
.@{fa-css-prefix}-5x { font-size: 5em; }
// Your custom sizes
.@{fa-css-prefix}-6x { font-size: 6em; }
.@{fa-css-prefix}-7x { font-size: 7em; }
.@{fa-css-prefix}-8x { font-size: 8em; }
回答by Chtiwi Malek
You can redefine/overwrite the default font-awesomesizes and also add you own sizes
您可以重新定义/覆盖默认的字体大小，也可以添加自己的大小
.fa-1x{
font-size:0.8em;
}
.fa-2x{
font-size:1em;
}
.fa-3x{
font-size:1.2em;
}
.fa-4x{
font-size:1.4em;
}
.fa-5x{
font-size:1.6em;
}
.fa-mycustomx{
font-size:3.2em;
}
回答by linto johny
Just add the font awesome class like this:
class="fa fa-plus-circle fa-3x"(You can increase the size as per 5x, 7x, 9x..)
You can also add custom CSS.
只需像这样添加字体真棒类：
class="fa fa-plus-circle fa-3x"（您可以按 5x、7x、9x 增加大小。）
您还可以添加自定义 CSS。
回答by clickbait
Easy — just use Font Awesome 5's default fa-[size]xclasses. You can scale icons up to 10x of the parent element's font-sizeRead the docs about icon sizing.
简单 - 只需使用 Font Awesome 5 的默认fa-[size]x类。您可以将图标缩放至父元素的 10 倍font-size阅读有关图标大小的文档。
Examples:
例子：
<span class="fas fa-info-circle fa-6x"></span>
<span class="fas fa-info-circle fa-7x"></span>
<span class="fas fa-info-circle fa-8x"></span>
<span class="fas fa-info-circle fa-9x"></span>
<span class="fas fa-info-circle fa-10x"></span>
回答by S.S.Niranga
Font awesome use SVG icons. So, you can resize it for your requirment.
字体很棒，使用 SVG 图标。因此，您可以根据需要调整其大小。
just use CSS class for that,
只需为此使用 CSS 类，
.large-icon{
font-size:10em;
//or
font-size:200%;
//or
font-size:50px;
}
