How to use font-awesome icons in React JS

JavaScript
1

I want to use Font-Awesome in React but after I installed via NPM and then import into my index.js file, how do I use for different components?

for instance, in the component below the icon does not show up:

import React from 'react';
import classes from './Search.module.css'
import '../../../../node_modules/font-awesome/css/font-awesome.min.css'

const search = (props) => {
    
    return (
    <div className = {classes.Search} >
        <i className="fas fa-search"></i>: <input type="text" onChange = {props.search}/>
        
        </div>      
)
} 

export default search
2

so I took the ā€˜sā€™ out of <fas fa-search>and now it worksā€¦and I also deleted the import into the search Component.

Not really sure why the font-awesome website gave me the wrong className?

1 Like
3

How would I go about installing Font-awesome via a CDN in React? When I link it via the index.html file, it doesnā€™t work.

4

Iā€™ve never done it via CDN before.

Here is how you would do it if you install packages for it.

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faTumblr, faTwitter } from '@fortawesome/free-brands-svg-icons'

<FontAwesomeIcon icon={faTumblr} />

Here is source code of my example. https://github.com/shimphillip/chuck-norris-says/blob/master/src/components/InfoBox/InfoBox.js

5

Not sure why linking the CDN into your index.html file isnt working, I do that sometimes. Iā€™ve also imported it into my css file and that works for me too.

6

I love React Iconsā€¦
https://react-icons.netlify.com/#/

3 Likes
7

This is so odd. I had the same problem and when I removed the ā€œsā€ from ā€œfasā€ in className, it worked fine. Were you ever able to find out why this is the caseā€¦? Seems like a bug. A very brief Google search did not turn up any more information. Anyways, thanks for the help!