Add Font Awesome Icons to all of our Buttons - Info/Delete

Add Font Awesome Icons to all of our Buttons - Info/Delete
0.0 0

#1

Tell us what’s happening:
I am getting two errors from the system (one each for the Info and Delete buttons) and the Trash can icon is not being displayed.

The syntax is (i think, at least) exactly the same for Delete and Info as it is for Like, so why do the last two bomb?

Clearly, there is a problem, but i have not been able to spot it. Note that if i shorten the “Delete” text to “Del” the trash can icon does show up…not sure why…

suggestions?

Your code so far

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

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

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-8">
      <h2 class="text-primary text-center">CatPhotoApp</h2>
    </div>
    <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>
    </div>
  </div>
  <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">
        Like
        <i class="fa fa-thumbs-up"> </i> 
      </button>
    </div>
 
    <div class="col-xs-4">
      <button class="btn btn-block btn-primary">
        Info
        <i class="fa fa-info-circle"> </i> 
      </button>
    </div>
    
    <div class="col-xs-4">
      <button class="btn btn-block btn-primary">
        Delete
        <i class="fa fa-trash"> </i> 
      </button>
    </div>
    
  </div>
  <p>Things cats <span class="text-danger">love:</span></p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="/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>
  </form>
</div>

Your browser information:

Your Browser User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.167 Safari/537.36.

Link to the challenge:


#2

The icon does show up, but since the width of the button are barely large enough for this challenge, it’s not visible if the word is too long.

Try putting the <i></i> Before the “delete” word. It should work.


#3

Thanks…the issue you addressed was just something i noticed. the issue that is stopping me from moving on is the following two errors generated by the site:

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

The syntax on all 3 buttons is identical, so i am unclear why it is balking about the 2nd and 3rd…thanks


#4

The starting code for the Like button was

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

See how the icon is before then word Like?

In your code, you change the position of the word to be in front of the icon. You should not have done that. Reset your code and try again without modifying the place of the words in relation to the original Like button.