How to use font-awesome icons in React JS

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

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

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.

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

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.

I love React Icons…
https://react-icons.netlify.com/#/

3 Likes

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!