FontAwesome 大小属性不会改变大小

Question

我的布局中有以下代码：

// Fontawesome
import { config, library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'

library.add(fas, far, fab)
config.autoAddCss = true;

我的组件我正在执行以下操作：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

// code
<a href="/onboarding/interests" className="px-10 py-3 mt-16 text-lg text-white bg-[#2967BC] rounded-lg hover:bg-[#004182]">
              <span className="flex items-center font-display">
                <FontAwesomeIcon icon="fa-brands fa-linkedin" size="2x" />
                <span className="ml-2">Sign in with LinkedIn</span>
              </span>
            </a>

当我尝试更改

size

属性时，尺寸更改不会反映出来。

有什么办法可以通过

tailwind utility classes

来控制它吗？

Answer 1

您可以使用 Tailwind 类更改 FontAwesome 的大小。 FontAwesome 的工作方式与 HTML 中的其他字体一样，您可以使用 CSS 更改它们的颜色或大小。例如：

 <FontAwesomeIcon icon="fa-brands fa-linkedin" size="2x" className="text-red-500"/>