FontAwesomeアイコンのサイズを縮小する方法

CSSのfont-sizeプロパティを使用する方法: アイコンを表示する要素のCSSに対して、font-sizeプロパティを使用してサイズを指定します。

<style>
  .icon {
    font-size: 12px; /* 好みのサイズに変更 */
  }
</style>
<i class="icon fas fa-heart"></i>

スタイルシートで直接アイコンのサイズを変更する方法: スタイルシートでアイコンのクラスを指定し、font-sizeプロパティを使用してサイズを変更します。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<style>
  .small-icon {
    font-size: 12px; /* 好みのサイズに変更 */
  }
</style>
<i class="small-icon fas fa-heart"></i>

スタイルシートのcontentプロパティを使用する方法: アイコンの:before疑似要素のcontentプロパティを使用して、アイコンのコンテンツ自体のサイズを変更します。

<style>
  .icon::before {
    font-size: 12px; /* 好みのサイズに変更 */
  }
</style>
<i class="icon fas fa-heart"></i>

これらはいくつかの一般的な方法ですが、FontAwesomeには他にもさまざまな方法があります。使用する方法は、具体的な要件やWebサイトの構造に応じて異なる場合があります。

このブログ投稿では、FontAwesomeアイコンのサイズを縮小するための方法とコード例を紹介しました。これにより、Webデザイナーと開発者はアイコンの外観を自由にカスタマイズできます。