I am using the version 5.12.1 and suddenly applying style to the component like this...
<section className="container-center">
<FontAwesomeIcon icon="arrow-down" style={{ color: "var(--themeP)", style={{ fontSize: "1.5rem" }} }} />
</section>
...is no longer working.
I am using this in another project with the exactly same version and that is working fine. I noticed that is applied automatically a fa-w-14 className but this class is not actually being applied and making the icons being displayed very huge without style.
The only solution I came across was transform: scale(x) when x is the value of size. But that is not what I want since it takes all the space where it meant to be filled in the original size.
I tried insert the prop size from docs without any result, too.
My package.json related font-awesome modules are like these:
"@fortawesome/fontawesome-svg-core": "^1.2.27",
"@fortawesome/free-solid-svg-icons": "^5.12.1",
"@fortawesome/react-fontawesome": "^0.1.9"
Only using the solid icon. If someone can shed some light on this, I`d appreciate the support.
You should import the fontawesome style file in your app as below
import "@fortawesome/fontawesome-svg-core/styles.css";
This will make the icon to be equal to your body font-sizeand let you use or add the default size prop values like 2xs, xs, sm, lg, xl, 2xl. In your case
<section className="container-center">
<FontAwesomeIcon icon="arrow-down" size="sm" style={{ color: "var(--themeP)" }} />
</section>