Hi i cant figure this out

Tell us what’s happening:


<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
h2 {
  font-family: Lobster, Monospace;

.thick-green-border {
  border-color: green;
  border-width: 10px;
  border-style: solid;
  border-radius: 50%;

<div class="container-fluid">
<div class="row">
  <div class="col-xs-8">
    <h2 class="text-primary text-center">CatPhotoApp</h2>
  <div class="col-xs-4">
    <a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
<div class="row">
  <div class="col-xs-4">
    <button class=“btn btn-block btn-primary”>
<i class=“fa fa-thumbs-up”>
<div class=“col-xs-4”>
<button class=“btn btn-block btn-info”><i class=“fa fa-info-circle”>
<div class=“col-xs-4”>
<button class=“btn btn-block btn-danger”>
<i class=“fa fa-trash”>

<p>Things cats <span class="text-danger">love:</span></p>
  <li>cat nip</li>
  <li>laser pointers</li>
<p>Top 3 things cats hate:</p>
  <li>flea treatment</li>
  <li>other cats</li>
<form action="https://freecatphotoapp.com/submit-cat-photo">
  <label><input type="radio" name="indoor-outdoor"> Indoor</label>
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
  <label><input type="checkbox" name="personality"> Loving</label>
  <label><input type="checkbox" name="personality"> Lazy</label>
  <label><input type="checkbox" name="personality"> Crazy</label>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 13020.87.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.119 Safari/537.36.

Challenge: Add Font Awesome Icons to all of our Buttons

Link to the challenge:

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Looking at the first failed test:

You should add a <i class="fas fa-info-circle"></i> within your info button element.

And looking at the relevant code:

<button class=“btn btn-block btn-info”><i class=“fa fa-info-circle”></i>Info</button>

I see two problems. First of all, you have a copy error - one of your classes is missing a letter.

Secondly, you’re quote characters - they are “smart” quotes - they angle. You have instead of ". Do you see the subtle difference? You want “dumb” (not angled) quotes. Most code editors give you dumb quotes by default but many text editors and word processors will give you smart quotes and sometimes when you cut and paste they convert them. I don’t know if that mistake happened on your end or when I cut and paste them, but it is a common issue and one to which we have to pay attention.

So, after taking a look at it, the hints explain what you were missing. In order to add the icons within each button, you needed to go to each section of code for each button and add the missing piece of instruction.

Like Button

<div class="row">
     <div class="col-xs-4">
          <button class="btn btn-block btn-primary">
     <i class="fa fa-thumbs-up"></i> Like </button>

Then, follow the hints for adding the icon element to the info and trash buttons; placing the <i class=> element after the tag, but before the button’s text. Always remember to use the closing element tag { } when the element declaration is complete.

Hope this helped & Happy Coding!

~ Ashley

1 Like