How to reflect font awesome icons in the react project?

user_16279419 0
Viewed 297

I have added the CDN link to the index.html of my React project.

You can check that in this repo

Added this line on line 16:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
    integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />

And added the i tags to my Components. Line 14,15 lines in this file

<Nav className="mr-auto">
    <Nav.Link href="/cart"><i className="fas fa-shopping-cart"></i>Cart</Nav.Link>
    <Nav.Link href="/login"><i className="fas fa-user"></i>Login</Nav.Link>
  </Nav>

But, the page is not showing the icons.

preview of icons page

Please suggest, how to fix this?

The repo link: github

font-awesome reactjs
1 Answers

To get started you’ll need to install the following packages into your project using a package manager like npm and yarn. https://fontawesome.com/v5.15/how-to-use/on-the-web/using-with/react

npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome

And Simply use Like this

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

const element = <FontAwesomeIcon icon={faCoffee} />
user_137059790
Related