fontawesome in react

1. Install FontAwesome First


npm i —save @fortawesome/fontawesome–svg–core
npm install —save @fortawesome/free–solid–svg–icons
npm install —save @fortawesome/react–fontawesome
npm install —save @fortawesome/free–brands–svg–icons
npm install —save @fortawesome/free–regular–svg–icons



2. Import to your component 

import { FontAwesomeIcon } from ‘@fortawesome/react-fontawesome’
import { faCoffee } from ‘@fortawesome/free-solid-svg-icons’

3. Now you can use inside your html
<FontAwesomeIcon icon={faCoffee} size=“5x”/>


All other style 

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.
fontawesome in react

Related

Leave a Comment Cancel Reply
