Ist es möglich, Font Awesome-Symbole größer als „fa-5x“ zu machen?

Ich verwende diesen HTML-Code:

<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="https://stackoverflow.com/questions/25719319/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>

Was schafft:

Ist es möglich, das Symbol größer als zu machen? fa-5x? Darunter ist viel weißer Raum, den ich gerne einnehmen würde.

Font awesome ist nur eine Schriftart, sodass Sie das Attribut font size in Ihrem CSS verwenden können, um die Größe des Symbols zu ändern.

Sie können dem Symbol also einfach eine Klasse wie folgt hinzufügen:

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

Alternativ können Sie die Quelle bearbeiten und Ihre eigenen Inkremente erstellen

FontAwesome 5

https://github.com/FortAwesome/Font-Awesome/blob/5.15.4/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

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

Sie können die Vorgabe neu definieren/überschreiben Schrift-genial Größen und fügen Sie auch Ihre eigenen Größen hinzu

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

1. Fügen Sie einfach die Font Awesome-Klasse wie folgt hinzu:

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

   (Sie können die Größe wie folgt erhöhen: 5x, 7x, 9x..)

2. Sie können auch benutzerdefiniertes CSS hinzufügen.

Einfach – verwenden Sie einfach die Standardeinstellung von Font Awesome 5 fa-[size]x Klassen. Sie können Symbole bis auf das 10-fache des übergeordneten Elements skalieren font-size Lesen Sie die Dokumentation zur Größenanpassung von Symbolen.

Beispiele:

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

Verwenden Sie SVG-Symbole für fantastische Schriftarten. So können Sie die Größe für Ihre Anforderung ändern.

Verwenden Sie dafür einfach die CSS-Klasse,

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

Sie können auch eine Skalierungstransformation mit CSS wie folgt definieren:

.larger-icon {
 transform:scale(2);
}