web-dev-qa-db-fra.com

Est-il possible de faire des icônes Font Awesome plus grandes que "fa-5x"?

J'utilise ce code 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>

Ce qui crée:

enter image description here

Est-il possible de faire l'icône plus grande que fa-5x? Il y a beaucoup d'espace blanc en dessous de celui-ci que j'aimerais qu'il occupe.

htmlcsstwitter-bootstrapfont-awesome
61
user3973427

Police awesome n'est qu'une police, vous pouvez donc utiliser l'attribut taille de police de votre CSS pour modifier la taille de l'icône.

Donc, vous pouvez simplement ajouter une classe à l'icône comme ceci:

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

Sinon, vous pouvez éditer la source et créer vos propres incrémentations

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

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

Vous pouvez redéfinir/écraser les tailles par défaut font-awesome et également ajouter vos propres tailles

.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. Il suffit d’ajouter la classe awesome font comme ceci:

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

    (Vous pouvez augmenter la taille selon 5x, 7x, 9x ..)

  2. Vous pouvez également ajouter des CSS personnalisés.

1
linto johny

Les polices géniales utilisent des icônes SVG. Donc, vous pouvez le redimensionner pour vos besoins.

il suffit d'utiliser la classe CSS pour cela,

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