È possibile rendere i Font Impressionante icone più grandi ‘fa-5x’?

Sto usando questo codice 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>

Che crea:

È possibile rendere i Font Impressionante icone più grandi 'fa-5x'?

È possibile effettuare l’icona più grande di fa-5x? C’è un sacco di spazio bianco sotto di esso che la vorrei prendere.

 

6 Replies
  1. 115

    Font impressionante è solo un tipo di carattere in modo che si può utilizzare il tipo di carattere dimensione attributo CSS per modificare la grandezza delle icone.

    In modo che si può solo aggiungere una classe per l’icona che assomiglia a questo:

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

    In alternativa, è possibile modificare il sorgente e creare il proprio incrementations

    FontAwesome 5

    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));
    
      [email protected]{fa-css-prefix}[email protected]{factor}x {
        font-size: (@factor * 1em);
      }
    }
    
    /* 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: -.0667em;
    }
    
    [email protected]{fa-css-prefix}-xs {
      font-size: .75em;
    }
    
    [email protected]{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

    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 */
    [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; }
    • Questa è la procedura giusta
    • Direi che dipende. Ho postato questa opzione, ma io uso questa tecnica in pari misura con il accettato di rispondere.
  3. 11

    È possibile ridefinire/sovrascrivere l’impostazione predefinita font-awesome dimensioni e anche aggiungere 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;
    }
  4. 2
    1. Semplicemente aggiungere il font impressionante di classe come questo:

      class="fa fa-plus-circle fa-3x"

      (È possibile aumentare le dimensioni come da 5x, 7x, 9x..)

    2. È inoltre possibile aggiungere CSS personalizzato.

  5. 0

    Font impressionante utilizzare icone SVG. Così, è possibile ridimensionarla per il vostro requirment.

    basta usare la classe CSS per che,

        .large-icon{
           font-size:10em;
           //or
          font-size:200%;
          //or
          font-size:50px;
        }
  6. -1

    Semplice, basta usare il Font Awesome 5 di default fa-[size]x classi. È possibile scalare le icone fino a 10x dell’elemento padre del font-size Leggere la documentazione sull’icona di ridimensionamento.

    Esempi:

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

Lascia un commento