Using font awesome in codepen

Question

I'm trying to add the styles sheet for font-awesome into a Codepen but seem to be getting nowhere, can anybody help please.

Codepen (https://codepen.io/kellett/pen/YreKaW)

Below is the styles sheet I've inserted in the top of HTML page.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

score 5 · Accepted Answer · edited Aug 20 '19 at 19:17

5

It's working, you just are using the wrong font-awesome class.

Line 19 should be .

See this updated CodePen

Note: You can also add CDNs in the CodePen settings so you don't have to include it inline in your html.

edited Aug 20 '19 at 19:17

Murilo Ferro

3
1
5

answered Oct 06 '17 at 14:07

Dan Kreiger

5,358
2
23
27

score 3 · Answer 2 · answered Jul 03 '19 at 08:24

3

simply add this http://static.fontawesome.com/css/fontawesome-app.css in css setting panel:

answered Jul 03 '19 at 08:24

Marco Allori

3,198
33
25

score 0 · Answer 3 · answered Oct 06 '17 at 14:07

0

you are using wrong . Check this

 use like this instead of .

answered Oct 06 '17 at 14:07

chirag satapara

1,947
1
15
26

score 0 · Answer 4 · answered Oct 06 '17 at 14:25

Go to Settings on the top right-hand corner. Then paste the CDN code in the box that says "Stuff for <head>." Press Save and Close before adding your Font Awesome tags, which should be formatted like this:

<i class="fa fa-thumbs-up"></i>

Here's the CodePen. You should see a thumbs up icon on the bottom of the page: https://codepen.io/calumchilds/pen/boLwVb

Hope this helps!

score 0 · Answer 5 · answered Jun 06 '21 at 11:23

0

Add this link into js setting: https://use.fontawesome.com/4d74086fc6.js.

answered Jun 06 '21 at 11:23

Sihc

59
6

score 0 · Answer 6 · answered Mar 15 '22 at 14:56

0

Open settings.
On the Pen Settings modal, select the CSS tab
In the "Add External Stylesheets/Pens" section, search for font-awesome.

answered Mar 15 '22 at 14:56

Asef Hossini

655
8
11

Using font awesome in codepen

6 Answers6