Font Awesome problem with portfolio challenge - Can not get icons to display

1

Hi all,

Can not get Font Awesome working in my codePen Pen.

In the settings, I went to the HTML tab and in the Stuff For <head> I pasted this link:

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

to include font awesome in my project.

I then used this line to get an icon:

<i class="fa fa-terminal fa-inverse"></i>

No icon is displayed. I’ve read through the post and tried the recommendations. If someone wants to take a look at my pen I’d appreciate it. Also, please feel free to point out any other mistakes you see, even if it is just bad format.

Thanks in advance
https://codepen.io/codemonkey11/full/oGvBxY/

2

Try removing the fa-inverse class. Then you might want to make it larger by adding fa-2x, etc.

1 Like
3

Hi, thanks for the help. I would have bet money that I already tried removing the

fa-inverse

but it worked this time. Do you know why the inverse won’t work?

Thanks

4

Adding fa-inverse basically makes it white. You can see this by giving your page a darker background color.

5

Got it thanks. I thought that the inverse would also turn the light parts of the symbol’s background dark.

Is there a way to do that without changing the background color of the whole section?

6

How about stacking the inversed icon on top of a dark square or circle icon?
http://fontawesome.io/examples/#stacked

1 Like
7

I’m going to give that a shot. Thanks for the idea and the link!