fontawesome을 사용할 때 크기는 위치 조정입니다.
잘 빠지는 일이 있었으므로 비망록으로 메모해 둡니다.

스타일 시트라도 이것보다는
태그 중에서 지정하는 것이 관리가 쉬웠습니다 ...

글꼴 크기

태그 중에서 다음 크기를 지정할 수 있습니다.

    <i class="fas fa-star fa-xs"></i>.75em<br>
    <i class="fas fa-star fa-sm"></i>.875em<br>
    <i class="fas fa-star fa-lg"></i>1.33em<br>
    <i class="fas fa-star fa-2x"></i>2em<br>
    <i class="fas fa-star fa-3x"></i>3em<br>
    <i class="fas fa-star fa-4x"></i>4em<br>
    <i class="fas fa-star fa-5x"></i>5em<br>
    <i class="fas fa-star fa-6x"></i>6em<br>
    <i class="fas fa-star fa-7x"></i>7em<br>
    <i class="fas fa-star fa-8x"></i>8em<br>
    <i class="fas fa-star fa-9x"></i>9em<br>
    <i class="fas fa-star fa-10x"></i>10em<br>
    <i class="fas fa-star fa-11x"></i>11em<br>

아이콘 회전

이것은 또한 태그에서 회전을 지정할 수 있습니다.
twitter 아이콘을 회전시키는 것은 없다고 생각합니다만・・・

  <i class="fab fa-twitter"></i>通常<br>
  <i class="fab fa-twitter fa-rotate-90"></i>90度回転<br>
  <i class="fab fa-twitter fa-rotate-180"></i>180度回転<br>
  <i class="fab fa-twitter fa-rotate-270"></i>270度回転<br>
  <i class="fab fa-twitter fa-flip-horizontal"></i>水平反転<br>
  <i class="fab fa-twitter fa-flip-vertical"></i>垂直反転<br>
  <i class="fab fa-twitter fa-flip-both"></i>水平垂直反転<br>

펄스와 스핀

아이콘에 깜박임과 회전 애니메이션을 적용할 수 있습니다.
방향이 맞지 않을 것 같습니다.

<div class="fa-2x">
  <i class="fas fa-spinner fa-pulse"></i>パルス<br>
  <p><i class="fa fa-spinner fa-spin"></i>スピン</p>
  <p><i class="fa fa-cog fa-pulse"></i>パルス</p>
  <p><i class="fa fa-cog fa-spin"></i>スピン</p>
</div>  

테두리로 둘러싸다

테두리로 둘러쌀 수 있을 것 같지만 결과가 너무 유감스러웠습니다...

<div class="fa-4x">
  <p><i class="fab fa-twitter fa-border"></i></p>
</div>  

여기에서 JS 시트로 읽어야합니다.

아이콘을 겹치다

디자인에 따라 외부 프레임을 원한다면 두 개의 로고가 겹쳐집니다.

  <i class="fas fa-square"></i>これと
  <i class="fas fa-star"></i>これを
  <span class="fa-stack fa-2x">
    <i class="fas fa-square fa-stack-2x"></i>
    <i class="fas fa-star fa-stack-1x fa-inverse"></i>
  </span>重ねる

아이콘 크기 지정

배경 요소를 무시하고 크기를 설정할 수 있습니다.

  <!-- 全体サイズ指定 -->
  <div class="fa-8x">
    <!-- 縮みを設定 -->
    <i class="fab fa-twitter" data-fa-transform="shrink-5" style="background:gray"></i>
    <!-- 無指定 -->
    <i class="fab fa-twitter" style="background:gray"></i>
    <!-- はみ出しを設定 -->
    <i class="fab fa-twitter" data-fa-transform="grow-8" style="background:gray"></i>
  </div>

아이콘 위치 조정

크기 조정과 배치를 지정할 수도 있습니다.

  <div class="fa-6x">
    <!-- 無指定 -->
    <i class="fab fa-twitter" data-fa-transform="shrink-5" style="background:gray"></i>
    <!-- ５縮ませて左に６ずらす -->
    <i class="fab fa-twitter" data-fa-transform="shrink-5 left-6" style="background:gray"></i>
    <!-- ５縮ませて下に６ずらす -->
    <i class="fab fa-twitter" data-fa-transform="shrink-5 down-6" style="background:gray"></i>
    <!-- ５縮ませて右に６ずらす -->
    <i class="fab fa-twitter" data-fa-transform="shrink-5 right-6" style="background:gray"></i>
    <!-- ５縮ませて上に６ずらす -->
    <i class="fab fa-twitter" data-fa-transform="shrink-5 up-6" style="background:gray"></i>
  </div>

잘 지내고 있습니다.

아이콘을 겹치다

마스크를 사용하여 아이콘을 겹칠 수 있습니다.

<div class="fa-4x">
    <i class="fab fa-twitter" data-fa-transform="shrink-10 up-.5" data-fa-mask="fas fa-comment"></i>
</div>

트위터 중독이라는 아이콘이 생겼어

아이콘에 텍스트 넣기

조금 강인하지만 텍스트를 넣을 수도 있습니다.

  <span class="fa-layers fa-fw">
    <i class="fas fa-comment"></i>
    <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-13" style="font-weight:900">message</span>
  </span>

메일 카운터 만들기

결합하면 아래와 같은 메일 카운터를 만들 수 있습니다.

   <span class="fa-layers fa-fw" style="background:gray; width:80px;height: 80px;">
    <i class="fa-4x fas fa-envelope"></i>
    <span class="fa-3x fa-layers-counter" style="background:white;color: black;">245</span>
  </span>