How to use Icons like Font Awesome in Gatsby

It's better to include every module that your application needs in just one JS. But if you still want to use CDN, just copy and edit the default template:

cp .cache/default-html.js src/html.js

If you want to pack font-awesome in the project bundle, you may choose:

• Use some react icon library. e.g. react-fontawesome
• Include the CSS files

For the last option, you must move the css and fonts in pages folder and then include fa in your js file.

import './css/font-awesome.css'

To use a font-awesome class, use the className attribute

<i className="fa fa-twitter"></i>

If you are looking get the js code from a CDN, use Netlify

For anyone visiting this page in late 2018+, I would highly recommend using react-icons.

import { FaBeer } from 'react-icons/fa';

class Question extends React.Component {
    render() {
        return <h3> Lets go for a <FaBeer />? </h3>
    }
}

Here is the recommended way to use Font-Awesome icons in Gatsby:

Add the following code snippet (mentioned in official react-fontawesome docs) in your higher components like Layout or Page.

import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { faCheckSquare, faCoffee  } from '@fortawesome/free-solid-svg-icons'

library.add(fab, faCheckSquare, faCoffee)

First npm install -S and import free-brands-svg-icons or/ and free-solid-svg-icons only if you need icons from them.

Then in each component where to use icons, add the following code:

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"

Now use it in your component like shown below:

<FontAwesomeIcon icon={["fab", "apple"]} style={{color:"#000000"}} />

I believe it is at this step where things go wrong. You need to include 'fab' in icon prop as shown above if you are adding brand icons. Otherwise if using (let say) solid icons, then just enter the spinal-case (e.g check-square) styled name of the icon without [] enclosing brackets in icon prop instead of camelCase (checkSquare) and you don't need to include 'fa' in the beginning.

Just an addition to last comment. The reason you need to pass an array to icon prop is because the default prefix used in FontAwesomeIcon component is fas. So if you supply icon from @fortawesome/free-solid-svg-icons (e.g. faHome) you don't need to add prefix.

<FontAwesomeIcon icon={home} />

For all other packages as e.g. '@fortawesome/free-brands-svg-icons' you have to supply array to icon specifying prefix

<FontAwesomeIcon icon={["fab", "laravel"]} />

Also, nice to know thing, is that you DON'T need to import all fab icons into your library. Same like with solid icons ('fas') you can import just icons you need and then just add them to library. Something like:

// fab icon (brand)    
import { faLaravel } from "@fortawesome/free-brands-svg-icons"
// fas icon (solid)
import { faHome } from "@fortawesome/free-solid-svg-icons"
library.add(faHome, faLaravel)