如何在 Angular 中使用 CSS 设置 FontAwesome 图标的大小？

Question

Per FontAwesome Usage Guide, you set the size of icons like so:

1. <fa-icon [icon]="['far', 'coffee']" [classes]="['toolbar-icon']" size="2x"></fa-icon>
2. <fa-icon [icon]="['far', 'coffee']" [classes]="['toolbar-icon']" transform="grow-8"></fa-icon>

The above methods work in the component view template. However, I would like my icons to be responsive and would like it to resize in response to screen size changes.

I tried the following CSS settings:

#main-toolbar {
    background-color: rgb(165, 42, 42);

    // ... othe entries

    @media only screen and (min-width:480px){
        fa-icon {
            color: white;
            padding: 0px 64px;
            size: "lg";
            // transform: "grow-8";
        }      
      }
      
      @media only screen and (max-width:680px){
        fa-icon {
            color: yellow;
            padding: 0px 16px;
            size: "sx";
            // transform: "grow-2";
        }      
      }
}// #main-toolbar

The color and padding changes so the CSS is working. However, both size and transform does not work and are ignored. Also, setting the size of the icon in the CSS even without media query does not work.

Is there a way to set the size of the icon through CSS?

I am using FontAwesome v6.1.1 in Angular v14.0.4. Any help would be greatly appreciated. Thanks in advance.

Answer 1

Creating an answer just in case other people find this question and doesn't look in the comments.

Since you style markup, you can use font-size to set the size of FontAwesome icons.

fa-icon {
  font-size: 20px;
}