是否有可能使Font Awesome图标大于“fa-5x”?

我正在使用这个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('dM-y', strtotime('Monday this week')) . "' AND '" . date('dM-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> 

这创造:

在这里输入图像说明

是否有可能使图标大于fa-5x ? 下面有很多空白,我希望它占用。

3 Solutions collect form web for “是否有可能使Font Awesome图标大于“fa-5x”?”

字体真棒只是一个字体,所以你可以使用CSS中的字体大小属性来改变图标的​​大小。

所以你可以像这样添加一个类到图标:

 .big-icon { font-size: 32px; } 

或者,您可以编辑源代码并创build自己的增量: https : //github.com/FortAwesome/Font-Awesome/blob/master/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; } 

您可以重新定义/覆盖默认的字体大小,并添加自己的大小

 .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; } 
  • 将ValidationSummary MVC3显示为“alert-error”Bootstrap
  • 如何从JavaScript中隐藏Bootstrap模态?
  • jQuery show()为Twitter Bootstrap隐藏了css类
  • 引导select下拉列表占位符
  • 你如何使Twitter Bootstrap手风琴保持开放?
  • Twitter引导 - 关注单击模式内的textarea
  • 引导程序3:保持页面上选定的选项卡刷新
  • Bootstrap 3 RC 1中的typeahead JavaScript模块在哪里?
  • Twitter的Bootstrap可滚动表行和固定头
  • 如何在twitter的bootstrap 2.1.0中使用新的词缀插件?
  • 如何更改导航栏/容器宽度? Bootstrap 3