1

I have a cart link in my html file and it shows "cart" as a sitring when i display it. I want to replace "cart" string with a font awesome icon but since i used React to implement the code i could not find how to do that.

Here is my code:

<Link to="/cart">
 Cart
 {cartItems.length > 0 && (
  <span className="badge">{cartItems.length}</span>
 )}
 </Link>

and my cart curently displayed like that cart

natalie smith
  • 11
  • 1
  • 2
  • 3
    Does this answer your question? [How to include a Font Awesome icon in React's render()](https://stackoverflow.com/questions/23116591/how-to-include-a-font-awesome-icon-in-reacts-render) – Pan Vi Jun 08 '21 at 12:07

2 Answers2

2

You can try the following code:

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faRandom } from '@fortawesome/free-solid-svg-icons'
import { Link } from 'react-router-dom';

const Example = () => {
     return (
         <div>  
            <Link to="/any-url">
              <FontAwesomeIcon icon={faRandom} size="2x"/> 
              {cartItems.length > 0 && (<span className="badge">{cartItems.length}</span>)}         
            </Link> 
         </div>
     );
 };

To know more check this out: Add link to Font Awesome icon in ReactJS

Binary Phoenix
  • 91
  • 1
  • 5
0

Use it something like this

<Link to="/cart">
Your font awesome icon here
 {cartItems.length > 0 && (
  <span className="badge">{cartItems.length}</span>
 )}
 </Link>

Note: don't forget to setup route for your "/cart" endpoint

Gulshan Aggarwal
  • 954
  • 1
  • 7
  • 13