freeCodeCamp Challenge Guide: Add Font Awesome Icons to our Buttons

freeCodeCamp Challenge Guide: Add Font Awesome Icons to our Buttons


Font Awesome is a convenient library of icons. These icons are vector graphics, stored in the .svg file format. These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements.

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


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


You could have just fixed it.


Thanks for your replay!

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

  • the text become



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


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.


Thank you very much Stratus41298!!!


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


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.


Fantastic! thanks Stratus41298


Thanks for ur suggestion