The reason why I wanted to give a dedicated guide for it is because this process is a little bit tricky if you've never done it before, and so I want to walk you through it, because when I was first building out this course material I actually ran into some confusing items with this, and so I wanted to discuss those.

So I'm gonna open up Visual Studio Code, and let's open up the navigation container, and the first thing we're gonna do is what we've already worked with, which is bringing in the font Awesome icon components. So I'll say import, in curly brackets, Font Awesome icon, just like this. And that's gonna be from @fortawesome, spelled out just like that, and then react-awesome. Make sure you have the slash and then react with a dash.

import { FontAwesome } from "@fortawesome/react-awesome";

Now that we have that, we can call this component like before, but I want to show you something that is a little bit on the tricky side. So in this sign out here I'm going to put inside of it the Font Awesome component, but here we're gonna give the icon name.

And what was tricky is actually finding out how to structure the icon name when there are multiple words. If you remember back to the last guide, we simply had to call icon equals and then trash, but what do you do when you want something like the sign-out link?

I'm gonna show you exactly how I discovered this. So I'm gonna go to fontawesome.io/icons and this is gonna show you all of the library of Font Awesome and I'll zoom out just so we can see everything. And if I type out sign out, this is the icon we want here.

And it is sign out alt, this is the name. If you were to be using this in just regular HTML you would just use this exact icon class right here. Well, the way that it works inside of Fort Awesome and React is a little bit different because if you open up the app component and you look at the library, you may think that, okay if we wanna bring this in, we're just gonna type sign out alt, all in caps exactly like how we brought it in.

Maybe we leave that s down in lower-case, but it would all be a guessing game. And when I originally was building this feature out for the course material, I tried about three or four different variations before I figured out the way the library works.

So the way that it works is you create your library instance, or you import it, you add the icons you want, and the icons use camel case, so you start off by saying fa and then all the other words are gonna have the very first letter capitalized, just like you see here with faTrash, and then faSignOutAlt. But then when it comes to actually passing in the props, what you have to do here is say, you don't use fa, you just say sign-out-alt. So here instead of camel case, you're actually going to pass in each one of the words just with a dash in between.

So that is what this is looking for, that's what the component expects. So now let's see, if I come back here it looks module not found, can't resolve react awesome. I probably misspelled something somewhere, let's come up and take a look. So I'm bringing in Font Awesome icon from, and it's @fortawesome and then /react and, oh, you know what, it's react-fontawesome, there we go.

I would have seen that if I would have gone back to the sidebar component, but that is the correct library name. And now if you come back here you can see that we now have this link and it actually is set up properly. Now let's give it a little bit of space just so that it looks better. So here you can see we have this name, and there's a couple ways that we can do it.

We could just grab this right side here and then inside we could grab the link, and then just give a little bit of margin to the left. So let's go and let's search for right side, it's like this, and let's find- Oh, it looks like we haven't actually added any styles for that, and that's fine.

So now we know we can just open up the navigation styles and so we have left side, but we didn't add any right side stylings. So we can do that right above, and I'll say right-side, and then I'm gonna grab the a link, and we're just gonna add some margin to the left.

Let's just try out 15 pixels to start out, and let's see if that works. And yes, that did, that looks nice.

You also can change a few of the link styles here. So we can add the pointer like we've done before. Let's change the color, so let's change the color to use teal, and then lastly let's add that transition. So yeah, transition, half a second, ease in, ease out like we've done before. And then from there we can add a hover style, so we'll say hover, color, and $dark-teal. Okay, let's see if this worked.

Okay, now we have that nice teal color, and if I hover over it changes to that dark color. And just to make sure that this is all working, make sure you click it, and yes, sign out is still functioning properly. And then if I go to our auth login component and login, you can see it's popping up there, now we're using our icons properly.

So great job if you went through that, you now know the correct structure to use whenever you are working with Font Awesome in React.

Resources

• Source code