How to use Icons like Font Awesome in Gatsby

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>    }}

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

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.