Add Font Awesome to GatsbyJS

Font Awesome is an incredible library of easy-to-use icons. I’m a backer and have the t-shirt to prove but I would reach for the library even if I wasn’t. I wanted to add the polish to my own site that a powerful library like Font Awesome can deliver.

Font Awesome with GatsbyJS

At this point in my new site development, I have all my layout, colors, and content in place. Now I need to add polish. I basically did a PSD to HTML development so that part was nothing new to developers. The design that I used had fonts included, but those fonts were included in the old-fashioned way, not the Gatsby/ Node/ performant way. I needed to use NPM.

NPM Install

Font Awesome has some documentation on how to use it in the first place. But then there is the How to use it with React section. But inside that, they have some more documentation that takes you to the GitHub repository from Font Awesome for React. This is a component that is used in place of the HTML tag in your application. It’s really very convenient.

There are a few ways to use the project, but I went with the recommended way to build your personal library. You basically included the node_modules that you need. Then inside the entry point to your application, you build your own app-specific library. That library is what you’ll use later in the rest of your component throughout the rest of your application. Instead of adding a string, like a class name to each of the <i> tags, you’d add the React Component with the string representing the icon. That way you don’t have to load in all the icons from the entire library each time the page loads. You only load the ones you need.

Add Icons to HTML

When you’re ready to use the icons you’ll add the component and a prop of “icon” with a string value. The value of “prop”, is the icon from the icon list. In this case, I’m using a Map Marker that has a string of ‘map-marker’.

Don’t forget when you’re using Font Awesome you can filter the icons. The libraries are getting large and this is filter is a great way to reduce the noise.

 

---

Be sure to read the documentation for more options. Things like spins, transforms, and some sizes are out of the box. They’ll also take you a long way.