アイコンを CSS でテキストのように自由変形 - Font Awesome

※ これは 2020/04/10 時点の font awasome v5.13.0 の情報です

最新版では動作が異なる可能性がありますのでご注意ください

前回お試しした Font Awesome、拡大以外にも実はいろいろできるらしいので試してみる

スポンサードリンク

こんなコードを書くと実は細かに拡大率を指定できました

<p><i class="fas fa-cat" style="font-size: 300%;"> ねこ 300 %</i></p>

ねこ 300 %

まるでテキスト！というわけで下記を試すと

<p><i class="fas fa-cat" style="color: red;">赤ねこ</i></p>

赤ねこ

なるほど色も指定できる

回転は下記のようにすればできました

<p><i class="fas fa-cat fa-rotate-180">180°ねこ</i></p>

180°ねこ

左右反転はこう

<p><i class="fas fa-cat fa-flip-horizontal">鏡映ねこ</i></p>

鏡映ねこ

回転アニメもできます

<p><i class="fas fa-cat fa-spin fa-2x"></i>&nbsp;回転ねこ</p>

 回転ねこ

アイコンを組み合わせることもできるらしい

<p>
  <span class="fa-stack">
    <i class="fas fa-cat fa-stack-2x"></i>
    <i class="fas fa-ban fa-stack-1x" style="color: red; font-size: 300%;"></i>
  </span>
  &nbsp;ねこ禁止！
</p>

 ねこ禁止！

これはすごい