Font awesome in codepen

Font awesome in codepen
0

#1

Trying to use font awesome in my codepen, but not luck so far. I have in the css settings:
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

But still nothing happens. Here is my pen…ignore the styling im not sure if I like those colors really. tried using adobe color. There should be a trash can right next to the current recipe name


#2

You need to resolve your JavaScript error first.


#3

My code pen console seems to be stuck at the bottom so I cant see if that has any errors. My chrome console shows an arror, but I have no idea what it means

Error in event handler for (unknown): TypeError: Cannot read property ‘enabled’ of undefined
at chrome-extension://geelfhphabnejjhdalkjhgipohgpdnoc/controllers/Insertion.js:1:1093

and

Uncaught DOMException: Blocked a frame with origin “https://s.codepen.io” from accessing a cross-origin frame.
at :1:16


#4

You have two versions of font-awesome loaded (4.4 and 4.7). Which one do you want to use?

If you are using 4.7, then the classes are “fa fa-trash”.


#5

It took me a while but found it:

You are not using JSX here but pure HTML so your classes don’t get applied and you end up with an empty and classless element.

change
<i class="fas fa-trash-alt"></i>
into
<i className="fa fa-trash"></i>


#6

Got it working! Appreciate it