
When building this site I noticed that on the first load before anything is cached on the browser, the Font Awesome icons used in the footer and contact section were huge for a second or two, it looks ugly so it needed to be fixed.

## Why it happens?

The usage of a Font Awesome icon on React/Gatsby/etc is like this:

```javascript
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faGithub } from '@fortawesome/free-brands-svg-icons';

const MyComponent = () => <FontAwesomeIcon icon={faGithub} />;
```

On a normal app, it works fine because the CSS is loaded right before the icon is rendered, so there is no visible change of the size, but on an <abbr title="Server Side Rendering">SSR</abbr> app (like with Gatsby), the code for the icon already exists before the CSS is loaded, so it gets the needed style after a few milliseconds, resulting in the flickering of the icon size.

## Solution

We need to disable the auto-loading of CSS by FontAwesome and add the styles ourselves, this way they are already embedded when Gatsby builds the site.

in my case it was accomplished by modifying the `gatsby-browser.js` file and adding:

```javascript
import { config } from '@fortawesome/fontawesome-svg-core';
import '@fortawesome/fontawesome-svg-core/styles.css';

config.autoAddCss = false;
```

And that's it!



A few days ago I saw a [tweet](https://twitter.com/gatsbyjs/status/1212388261315911680) about a challenge to learn more about [Gatsby](https://www.gatsbyjs.org/), and since my site was already a simple landing page and a separate blog, both built with it, thought this could be a good opportunity to improve both the site and my knowledge of it, so here we go!

## Challenge 1: Create a Gatsby Blog from Scratch

The old version of the site used a starter for the blog and I modified another starter for the landing, but I think it was over-bloated with all the things it had for a simple landing page, this time I wanted something simple but functional and to unify the landing and the blog.

For the design, I just tested some [color combinations](https://coolors.co/app) that looked good together (at least to myself) and it was interesting because even though I have several years of experience it's the first time I do a responsive mobile-first markup. Way to go, me!

For styling the choice was [Emotion](https://emotion.sh/), I've been wanting to try this CSS-in-JS thing that seems to be trending and what's better than with a project like this? I'm sure it still has issues with how it's being used, but I really liked the experience.

Initially, the idea was to use [TypeScript](https://www.typescriptlang.org/) because I'm trying to learn more of it by using in some small pet projects, but there were too many things I didn't understand yet and didn't want to spend lots of time trying to get it right, so I got back to plain JS.

Overall I'm happy with how it looks and with this initial version, there is still [some work to do](https://github.com/osiux/osiux.ws/issues), but I know myself and for sure I could have left it unfinished if I tried to do everything I have in mind in one go.

[Github repository](https://github.com/osiux/osiux.ws)


Archive - Tag: gatsbyjs

Get rid of huge Font Awesome icons on Gatsby

#100DaysOfGatsby