it-swarm.com.de

Ist es möglich, Font Awesome-Icons 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="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:

enter image description here

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

61
user3973427

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

So können Sie dem Symbol einfach eine Klasse hinzufügen:

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

Alternativ können Sie die Quelle bearbeiten und eigene Inkrementierungen erstellen

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

Sie können die Standardgrößen font-awesome neu definieren/überschreiben und auch Ihre eigenen Größen hinzufügen

.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;
}
11
Chtiwi Malek
  1. Fügen Sie einfach die fantastische Klasse für Schriftarten hinzu:

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

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

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

1
linto johny

Einfach - verwenden Sie einfach die Standard-fa-[size]x-Klassen von Font Awesome 5. Sie können Symbole bis zum 10-fachen des übergeordneten Elements skalieren. font-sizeLesen Sie die Dokumente zur Größenbestimmung 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>
0
clickbait

Schrift großartig verwenden SVG-Symbole. So können Sie es für Ihre Anforderung anpassen.

verwenden Sie einfach die CSS-Klasse,

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