CODEWITHSUNDEEP
reactjsfontsfont-awesome
Ash
Ash

Reputation: 101

Font Awesome icon is not appearing in react application

I Install all 3 required modules in react app.
npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome

I am trying to add font awesome icon in my program. But it is not showing up.Do I need to copy Font Awesome link and add in my app. That's what I used to do it in my html program.

(For example )

But in react how to do it? I tried the way which is in the document but it is not working. I only added the part of my program.Please help.

import React  from 'react';
import { Form, Button} from 'react-bootstrap';
import './ContactUs.css';
import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { faCheckSquare, faShare} from '@fortawesome/free-solid-svg-icons'
library.add(fab, faCheckSquare, faShare)

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

class ContactUs extends React.Component{
    
    render(){
        return(
            <div>
               <Button className="btn send-button mt-4"> 
                  SUBMIT
                    <FontAwesomeIcon icon="share" />
                  </Button>
            </div>
        )
    }
}
export default  ContactUs;

Upvotes: 0

Views: 563

Answers (1)

Rahimuddin
Rahimuddin

Reputation: 614

I don't find any issue except one thing. As you are using individual icon instead of, <FontAwesomeIcon icon="share" /> you must use write like this <FontAwesomeIcon icon={faShare} />

Please check the below link for reference. https://codesandbox.io/s/frosty-glade-9ful6?file=/src/App.js

Upvotes: 1

Related Questions