Help: using fontawesome with React in codepen?

JavaScript
1

Hi, for some reason I don’t seem to be able to get the font-awesome twitter icon to render.

Here is the link to the pen:
https://codepen.io/ljmassive/pen/qBRWQmo

I’ve been googling all day and have tried importing several libraries (I think?) and nothing seems to work! The “residue” of this process is still left in the pen. I’m not sure if React was the best choice for this project, but I was really keen to try it out!

Hopefully someone out there can help me out here! I’d really like to understand what’s going on here, not just how to make it work but why it isn’t working.

Thanks very much in advance :slight_smile:
Lucy

Your browser information:

User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:86.0) Gecko/20100101 Firefox/86.0.

Challenge: Build a Random Quote Machine

Link to the challenge:

1 Like
2

I would suggest you use CodeSandbox instead.

3

I find the Font Awesome React docs a bit confusing.

This seems to work for me on Codepen:

Imports:

import { FontAwesomeIcon } from "https://cdn.skypack.dev/@fortawesome/react-fontawesome"
import { faTwitter } from "https://cdn.skypack.dev/@fortawesome/free-brands-svg-icons@5.15.3";

Component usage:

<FontAwesomeIcon icon={faTwitter}/>

If you want to use the {['fab', 'twitter']} syntax I think you have to use the loader.

Imports:

import { FontAwesomeIcon } from "https://cdn.skypack.dev/@fortawesome/react-fontawesome"
import { fab } from "https://cdn.skypack.dev/@fortawesome/free-brands-svg-icons@5.15.3";
import { library } from "https://cdn.skypack.dev/@fortawesome/fontawesome-svg-core";

library.add(fab);

Component usage:

<FontAwesomeIcon icon={['fab', 'twitter']}/>

Edit: Here is a CodeSandbox as well with your code and your dependencies, just in case. You can fork it by creating an account and saving it.

1 Like
4

Thanks so much, this is incredibly helpful!

The docs have done nothing but confuse me all day :sweat_smile:

I tried putting my code into CodeSandbox but couldn’t quite get the styling the same and still couldn’t get the fontawesome icon - so this will be really useful to compare and see what I’ve missed/where I went wrong.

Thanks again so much for your help!

5

Glad to have helped, happy coding!

1 Like
6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.