freeCodeCamp Challenge Guide: Add Font Awesome Icons to our Buttons

Add Font Awesome Icons to our Buttons


Problem Explanation

The challenge requires you to add a thumbs up icon from font awesome to the button with the text ‘Like’ in it


Hints

Hint 1

The <i> tag is not self-closing.

Hint 2

Use the classes fas and fa-thumbs-up.


Solutions

Solution 1 (Click to Show/Hide)

Modify the button tag to the following:

<button class="btn btn-block btn-primary">
        <i class="fas fa-thumbs-up"></i>
        Like
</button>
3 Likes

Why this is not recognized as a violation of elements nesting - intersection of and elements.?

1 Like

You could have just fixed it.

1 Like

Thanks for your replay!

Not me, but the built-in text editor done it - when I’ve copied fragment with intersection
Like

  • the text become
    Like

AUTOMATICALLY!

1 Like

I tried that same code but I am getting the thumbs up above the like button. Help please

2 Likes

This one was a little tricky. First of all, the hint above doesn’t work. It just puts the thumbs up above the button.

The first thing you have to do is set up your button. button class=“btn btn-block btn-primary” and close it off with an arrow.
Second, open up a new class for your thumbs up with an arrow. i class=“fa fa-thumbs-up” and close it off with an arrow.

Third, close off the the closest element (the i element) and get it out of the way using /i, then add text to your button (like) then close off the button element.

There’s alot of open and close arrows in this so if it’s not working for you check that everything has a container. I had put the like right after the button element and still got a pass even though my closing button and i arrows were pink.

51 Likes

Thank you very much Stratus41298!!!

2 Likes

Thanks very much it helped a lot. you are the best.!!!

3 Likes

To simpifly what @Stratus41298 said, just put all the “i” class (with the open and close tag) between your first button tag and the word “like”.

<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i>Like</button>

Also, tks a lot @Stratus41298.

36 Likes

Fantastic! thanks Stratus41298

Thanks for ur suggestion

6 Likes