Font Awesome 아이콘을 'fa-5x'보다 크게 만들 수 있습니까?

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>

다음을 생성합니다.

아이콘을보다 크게 만들 수 fa-5x있습니까? 그 아래에 내가 차지하고 싶은 공백이 많이 있습니다.

---

Font awesome은 단지 글꼴이므로 CSS의 글꼴 크기 속성을 사용하여 아이콘의 크기를 변경할 수 있습니다.

따라서 다음과 같이 아이콘에 클래스를 추가 할 수 있습니다.

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

---

또는 소스를 편집하고 자신의 증분을 만들 수 있습니다.

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

---

기본 글꼴 크기를 재정의 / 덮어 쓰고 자신 만의 크기를 추가 할 수도 있습니다.

.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. 다음과 같이 글꼴 멋진 클래스를 추가하십시오.

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

   (5x, 7x, 9x에 따라 크기를 늘릴 수 있습니다.)

2. 사용자 정의 CSS를 추가 할 수도 있습니다.

---

멋진 글꼴 사용 SVG 아이콘. 따라서 필요에 따라 크기를 조정할 수 있습니다.

CSS 클래스를 사용하면됩니다.

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

---

쉬움 — Font Awesome 5의 기본 fa-[size]x클래스를 사용하십시오. 상위 요소의 최대 10 배까지 아이콘 크기를 조정할 수 있습니다 font-size . 아이콘 크기 조정에 대한 문서를 읽어보세요.

예 :

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

참고 URL : https://stackoverflow.com/questions/25719319/is-it-possible-to-make-font-awesome-icons-larger-than-fa-5x