Here is an example of the solid version:
<FontAwesomeIcon icon={['fas', 'code']} />
This defaults to solid version if a type is not specified:
<FontAwesomeIcon icon={faCode} />
And the light version using fal:
<FontAwesomeIcon icon={['fal', 'code']} />;
Now that you have installed what you need and have added your icons to your Font Awesome library, you are ready to use them and assign sizes. In this tutorial, we’ll use the light (fal) package.
This first example will use the normal size:
<FontAwesomeIcon icon={['fal', 'code']} />
The second example can use named sizing, which uses abbreviations for small (sm), medium (md), large (lg), and extra-large (xl):
<FontAwesomeIcon icon={['fal', 'code']} size="sm" />
<FontAwesomeIcon icon={['fal', 'code']} size="md" />
<FontAwesomeIcon icon={['fal', 'code']} size="lg" />
<FontAwesomeIcon icon={['fal', 'code']} size="xl" />
The third option is to use numbered sizing which can go up to 6:
<FontAwesomeIcon icon={['fal', 'code']} size="2x" />
<FontAwesomeIcon icon={['fal', 'code']} size="3x" />
<FontAwesomeIcon icon={['fal', 'code']} size="4x" />
<FontAwesomeIcon icon={['fal', 'code']} size="5x" />
<FontAwesomeIcon icon={['fal', 'code']} size="6x" />
When using numbered sizing, you can also use decimals to find the perfect size:
<FontAwesomeIcon icon={['fal', 'code']} size="2.5x" />
Font Awesome styles the SVGs it uses by taking the text-color of the CSS. If you were to place a <p> tag where this icon were to go, the color of the paragraph would be the color of the icon:
<FontAwesomeIcon icon={faHome} style={{ color: 'red' }} />
Font Awesome also has a power transforms feature where you can string together different transforms:
<FontAwesomeIcon icon={['fal', 'home']} transform="down-4 grow-2.5" />
You can use any of the transforms found on the Font Awesome site. You can use this to move icons up, down, left, or right to get the positioning perfect next to text or inside of buttons.