如何在Angular中通过CSS设置FontAwesome图标尺寸？

你遇到的问题核心是：size和transform是FontAwesome Angular组件的输入属性，并非CSS原生属性，所以直接在CSS中设置这两个属性会被忽略——这也是为什么颜色、padding这类CSS原生属性能生效，而尺寸设置不行的原因。

以下是三种可行的解决方案：

方案1：通过CSS font-size 控制尺寸 #

FontAwesome图标（无论字体还是SVG模式）都可以通过font-size调整大小，你可以直接在媒体查询中设置该属性，对应FontAwesome预设尺寸的数值如下：

• sx → 0.75em
• lg → 1.33333em
• 2x → 2em
• 3x → 3em

修改后的CSS代码：

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

    /* 其他样式 */

    @media only screen and (min-width: 480px) {
        fa-icon {
            color: white;
            padding: 0 64px;
            font-size: 1.33333em; /* 对应lg尺寸 */
        }      
    }
      
    @media only screen and (max-width: 680px) {
        fa-icon {
            color: yellow;
            padding: 0 16px;
            font-size: 0.75em; /* 对应sx尺寸 */
        }      
    }
}

方案2：通过Angular响应式绑定动态设置组件属性 #

如果需要更灵活的逻辑，可以用Angular的BreakpointObserver监听屏幕断点，动态绑定size输入属性：

组件类代码 #

import { Component, OnInit } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent implements OnInit {
  iconSize = 'lg';

  constructor(private breakpointObserver: BreakpointObserver) {}

  ngOnInit(): void {
    this.breakpointObserver.observe([
      '(max-width: 680px)',
      '(min-width: 480px)'
    ]).subscribe(breakpointState => {
      if (breakpointState.breakpoints['(max-width: 680px)']) {
        this.iconSize = 'sx';
      } else if (breakpointState.breakpoints['(min-width: 480px)']) {
        this.iconSize = 'lg';
      }
    });
  }
}

模板代码 #

<fa-icon [icon]="['far', 'coffee']" [classes]="['toolbar-icon']" [size]="iconSize"></fa-icon>

方案3：直接控制SVG元素尺寸（SVG模式下） #

FontAwesome Angular默认使用SVG渲染图标，你可以直接针对内部的<svg>标签设置width和height：

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

    /* 其他样式 */

    @media only screen and (min-width: 480px) {
        fa-icon svg {
            width: 24px;
            height: 24px;
            color: white;
        }
        fa-icon {
            padding: 0 64px;
        }      
    }
      
    @media only screen and (max-width: 680px) {
        fa-icon svg {
            width: 16px;
            height: 16px;
            color: yellow;
        }
        fa-icon {
            padding: 0 16px;
        }      
    }
}

内容的提问来源于stack exchange，提问作者Mario Garrido