Font Awesome does not work in Portfolio codepen

1

Hello good morning.

I’m trying to load icons Font Awesome, but not me my project samples loaded with the boostrap css and js . but I do not know what I’m doing wrong . can you help me, please. Thank you

3 Likes
2

You need to add the font awesome css link to the codepen in the CSS section

4

Ugh tried to post the link here. let’s try again:

link rel=“stylesheet” href=“http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css”

3 Likes
5

use that only in the CSS referenced area

10 Likes
6

I have an article that will show you how to do this. Please let me know if it helps!

9 Likes
7

Hello, I have the same problem! I add the same link to Code Pen in the section “Add external CSS” and then for example I put the free code camp font inside the body. It doesn’t show up though!

8

Can you post a link to your pen?

9

Thank you for the response! I found out about it in the chat room. I had to implement the latest version of the fonts awesome related to bootstrap. I had another I guess.

2 Likes
10

Article is informative and helped me to solve same issue in code pen

1 Like
11

great! I am glad that it was helpful!

12

hey your article helped me to solve same problem…thank you so much

13

Wow, you are my hero for today!!

I started to build my portfolio page and thought I would just follow the W3school tutorial and that all would work out easily. Than I got stock for a few hours but luckily you have made lots of effort to put out this.

THANKS!!

1 Like
14

Hi, I had this same problem of not having my font awesome icons showing up. I looked it up on w3resource.com and compared their bootstrap link version to what I “quick added” in codepen CSS settings. The versions in the quick add in code pen we’re outdated! So, go to settings, CSS, then at the bottom, add another resource, then paste in the newer version of bootstrap. In this case, this worked for me: https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css

Save it, then it should work!

1 Like
15

Hey Wayne you helped me fix this. Only thing is with CodePen you have to add the “s” to the “http” --> “https”

16

Does anyone know if version 5 works in codepen?

18

Good article. It really helped.
Thanks!

19

Help! I read through this thread but I am still stuck. I checked the version of font-awesome. I had loaded up the one listed in the W3schools page which is:
“https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”. That didn’t work so then I tried the link given in this thread:
“https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css”. But it still doesn’t work. My codepen here >>> https://codepen.io/sabahatiqbal/pen/jzMwmL?editors=0100.

Help would be much appreciated!