Html 是否可以使字体图标大于';fa-5x';?
我正在使用以下HTML代码:Html 是否可以使字体图标大于';fa-5x';?,html,css,twitter-bootstrap,font-awesome,Html,Css,Twitter Bootstrap,Font Awesome,我正在使用以下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&g
<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>
Font awesome只是一种字体,因此您可以使用CSS中的字体大小属性来更改图标的大小
因此,您只需向图标添加一个类,如下所示:
.big-icon {
font-size: 32px;
}
class="fa fa-plus-circle fa-3x"
或者,您可以编辑源并创建自己的增量
5
4
您可以重新定义/覆盖默认的字体大小,也可以添加自己的大小
.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;
}
只需添加如下字体类:
.big-icon {
font-size: 32px;
}
class="fa fa-plus-circle fa-3x"
(您可以根据5x、7x、9x……增加尺寸)
您还可以添加自定义CSS
简单-只需使用Font Awesome 5的默认fa-[size]x
类即可。您可以将图标缩放到父元素字体大小的10倍
示例:
<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>
字体使用SVG图标。因此,您可以根据需要调整其大小
只需使用CSS类即可
.large-icon{
font-size:10em;
//or
font-size:200%;
//or
font-size:50px;
}
您还可以使用CSS定义缩放变换,如下所示:
.larger-icon {
transform:scale(2);
}
我认为这要视情况而定。我把它贴在了一个选项上,但我使用了与公认答案相同的方法。