Source:  Twitter logo

I want to use Font Awesome Icons in my Gatsby project. I would love to include font awesome with a CDN.

Just including it in a script tag doesn't work. I think I need to import it with import ... from '../fontawesome.css' but i am not able to get this working and also wanted to use a cdn for that. Or do I need to parse it with a css library for gatsby?

Please give me advice or hints how to do it.

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>
    }
}
89 users liked answer #0dislike answer #089
sntnupl profile pic
sntnupl

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:

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

12 users liked answer #1dislike answer #112
Alex Munoz profile pic
Alex Munoz

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.

10 users liked answer #2dislike answer #210
Waleed93 profile pic
Waleed93

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)
1 users liked answer #3dislike answer #31
Mara profile pic
Mara

The simplest solution is to add font-awesome script in layout.js <Helmet> tag:

<Helmet>
    <html lang={site.lang} />
    <link
        rel="shortcut icon"
        type="image/x-icon"
        href={Favicon}
    ></link>
    {/* adding google fonts */}
    <link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet"/>
    {/* adding font-awesome icons */}
    <script src="https://kit.fontawesome.com/02130b3d51.js" crossorigin="anonymous"></script>
    <style type="text/css">{`${site.codeinjection_styles}`}</style>
    <body className={bodyClass} />
</Helmet>

Now add simply, the font-awesome icons where ever you like:

<h2 onClick={scrollToBottom} style={buttonStyle} className="scroll-btn" aria-label="to bottom" component="span">
    {/* adding font-awesome icon */}
    <i class="fas fa-arrow-alt-circle-down"></i>
</h2>

It's really this simple!!

0 users liked answer #4dislike answer #40
Kushal Bhalaik profile pic
Kushal Bhalaik

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).