How to use Icons like Font Awesome in Gatsby

javascript reactjs gatsby
Jobeso picture Jobeso · Oct 19, 2017 · Viewed 20.6k times · Source

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.

Answer

sntnupl picture sntnupl · Nov 10, 2018

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

Related questions

add raw HTML with <script> inside Gatsby React page

I am trying to add an external embed code to my Gatsby page. I currently use import React from 'react' import Link from 'gatsby-link' let test ="<script type='text/javascript'> (function(d, s) { var useSSL = 'https:' == document.…

Read More
When to use a react framework such as Next or Gatsby vs Create React App

I'm in the sort of rapid prototyping phase of my React/javascript learning experience. I was wondering when folks would reach for a framework such as Next.js or Gatsby.js vs the standard Create React App. I really dig …

Read More
Can't resize react-chartjs-2 doughnut chart

I am trying to make a doughnut chart with react and gatsbyjs. The chart works fine but I can not get it to use the full width of the div. It displays too small for the area reserved. render (){ return ( &…

Read More