React+Tailwind+Next.js环境下无法调整Font Awesome图标尺寸求助

你遇到的问题主要有两个核心原因：

1. 外层的<span>是默认行内元素，Tailwind的w-2 h-2对行内元素无效——行内元素的宽高由内容决定，无法直接通过宽高类强制设置。
2. Font Awesome的size属性可能被Tailwind样式或组件默认样式覆盖，导致尺寸控制不生效。

下面是几个可行的解决方法：

方法一：直接给FontAwesomeIcon加Tailwind宽高类 #

FontAwesomeIcon最终渲染为svg元素，属于可直接设置宽高的替换元素，把Tailwind尺寸类直接应用到组件上即可，无需外层span：

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faUtensils } from "@fortawesome/free-solid-svg-icons";

export default function Nav() {
  return (
    <div>
      <FontAwesomeIcon
        icon={faUtensils}
        className="w-2 h-2"
        style={{ color: "#00000d" }}
      />
    </div>
  );
}

方法二：修改外层span为行内块元素 #

如果需要保留外层容器，给span添加inline-block类让宽高属性生效，同时让图标占满容器空间：

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faUtensils } from "@fortawesome/free-solid-svg-icons";

export default function Nav() {
  return (
    <div>
      <span className="w-2 h-2 inline-block">
        <FontAwesomeIcon
          icon={faUtensils}
          className="w-full h-full"
          style={{ color: "#00000d" }}
        />
      </span>
    </div>
  );
}

方法三：直接通过style属性设置尺寸 #

这种方式优先级最高，不会被其他样式覆盖，直接指定宽高数值即可：

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faUtensils } from "@fortawesome/free-solid-svg-icons";

export default function Nav() {
  return (
    <div>
      <FontAwesomeIcon
        icon={faUtensils}
        style={{ color: "#00000d", width: "0.5rem", height: "0.5rem" }}
      />
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Igor Aguiar