HTMLでFontAwesomeアイコンのサイズを調整する方法


  1. FontAwesomeのCSSを追加する: 最初に、FontAwesomeのCSSをHTMLファイルに追加する必要があります。以下のコードを<head>セクション内に挿入してください。

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

    上記のコードは、CDN経由でFontAwesomeのスタイルシートを読み込むためのものです。バージョン番号は最新のものに更新してください。

  2. アイコンのサイズを指定する: アイコンのサイズを指定するには、<i>要素に適用するCSSスタイルを設定します。以下のような例を参考にしてください。

    <i class="fas fa-rocket" style="font-size: 24px;"></i>

    上記の例では、fa-rocketというFontAwesomeのアイコンクラスを使用しています。style属性を使用して、font-sizeプロパティを設定しています。この例では、アイコンのサイズを24ピクセルに設定しています。

    必要に応じて、他のCSSプロパティ(colorなど)も追加してアイコンのスタイルをカスタマイズすることができます。

  3. アイコンのサイズをレスポンシブにする: アイコンのサイズをレスポンシブに調整するには、CSSメディアクエリを使用する方法があります。以下は一例です。

    <style>
    @media (max-width: 768px) {
     .icon {
       font-size: 18px;
     }
    }
    </style>
    <i class="fas fa-rocket icon"></i>

    上記の例では、画面幅が768ピクセル以下の場合にのみ、アイコンのサイズを18ピクセルに変更しています。iconというクラスを追加していることに注意してください。