Можно ли сделать Font Awesome значками больше, чем "fa-5x"?

Я использую этот код 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>

Что создает:

enter image description here

Можно ли сделать значок больше, чем fa-5x? Под ним много белого пространства, которое я бы хотел, чтобы оно заняло.

Ответы

Ответ 1

Шрифт awesome - это просто шрифт, поэтому вы можете использовать атрибут размера шрифта в CSS для изменения размера значка.

Итак, вы можете просто добавить класс к значку, подобному этому:

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

Ответ 2

В качестве альтернативы вы можете отредактировать исходный код и создать свои собственные приращения: 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; }

Ответ 3

Вы можете переопределить/перезаписать стандартные размеры font-awesome по умолчанию, а также добавить собственные размеры

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