È possibile rendere le icone di Font Awesome più grandi di 'fa-5x'?

Sto usando questo codice HTML:È possibile rendere le icone di Font Awesome più grandi di 'fa-5x'?

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

che crea:

enter image description here

E 'possibile rendere l'icona più grande di fa-5x? Sotto c'è un sacco di spazio bianco che vorrei prendere.

fonte

2014-09-08 user3973427

Font impressionante è solo un font in modo da poter utilizzare l'attributo della dimensione del carattere nel CSS per modificare la dimensione dell'icona.

Quindi, si può semplicemente aggiungere una classe al un'icona come questa:

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

fonte

2014-09-08 07:59:14

In alternativa è possibile modificare il sorgente e creare i propri incrementations: https://github.com/FortAwesome/Font-Awesome/blob/master/less/larger.less

// Icon Sizes 
// ------------------------- 

/* makes the font 33% larger relative to the icon container */ 
[email protected]{fa-css-prefix}-lg { 
    font-size: (4em/3); 
    line-height: (3em/4); 
    vertical-align: -15%; 
} 

[email protected]{fa-css-prefix}-2x { font-size: 2em; } 
[email protected]{fa-css-prefix}-3x { font-size: 3em; } 
[email protected]{fa-css-prefix}-4x { font-size: 4em; } 
[email protected]{fa-css-prefix}-5x { font-size: 5em; } 

// Your custom sizes 
[email protected]{fa-css-prefix}-6x { font-size: 6em; } 
[email protected]{fa-css-prefix}-7x { font-size: 7em; } 
[email protected]{fa-css-prefix}-8x { font-size: 8em; }

fonte

2014-09-08 08:25:25 Luke

Questa è la procedura giusta – Smoke

Direi che dipende. Ho postato questa opzione, ma io uso questa tecnica in egual misura con la risposta accettata. – Luke

È possibile ridefinire/sovrascrivere il valore predefinito font-awesome dimensioni e aggiungere anche le proprie dimensioni

.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; 
}

fonte

2015-06-21 21:44:11

È possibile rendere le icone di Font Awesome più grandi di 'fa-5x'?

risposta

Problemi correlati