CODEWITHSUNDEEP
javascripthtmlreactjstypescriptfont-awesome-5
user3417479
user3417479

Reputation: 1910

Add link to Font Awesome icon in ReactJS

I use Typescript + ReactJS and I try to add a link in font awesome icons. My code is like this:

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


const MiddleHeading = () => {
     return (
         <div id="middle_heading">  

              <FontAwesomeIcon icon={faRandom} size="2x"/>          

         </div>
     );
 };

 export default MiddleHeading;

Any idea on how to add a URL to my icon?

thanks for any help

Upvotes: 9

Views: 29668

Answers (2)

rsn
rsn

Reputation: 409

You do not need Link from react-router-dom at all as mentioned in the other answer. Just a simple HTML <a> will work

<div id="middle_heading">  
  <a href="example.com">
    <FontAwesomeIcon icon={faRandom} size="2x"/>      
  </a>    
</div>

Upvotes: 13

Engineer
Engineer

Reputation: 1261

Link of react-router-dom will work,

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 MiddleHeading = () => {
     return (
         <div id="middle_heading">  
            <Link to="/any-url">
              <FontAwesomeIcon icon={faRandom} size="2x"/>          
            </Link> 
         </div>
     );
 };

 export default MiddleHeading;

Upvotes: 9

Related Questions