Add Font Awesome Icons to our Buttons? Was able to complete it, but it looks wrong

Add Font Awesome Icons to our Buttons? Was able to complete it, but it looks wrong
0

#1

Tell us what’s happening:
Hi everyone! Hope you’re all having a great day today. I’m having a lot of trouble getting the thumbs up icon correctly next to the like button. What actually happens with my code is that there are approximately three extra thumbs up. If you could take a look at my code, and hopefully explain what’s going on - I’d really appreciate it. Thanks!

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"><i class= "fa fa-thumbs-up"</i>Like</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-info">Info</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-danger">Delete</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/61.0.3163.100 Safari/537.36.

Link to the challenge:


#2

You have a couple of improper syntax here and there.

  • <div class="container-fluid" (missing > at the end)
  • <i class= "fa fa-thumbs-up"</i>Like (missing > before </i>)

Note that when parts of your code are highlighted in red, it’s a sign of improper syntax.


#3

Oh my gosh, thank you so much! I didn’t realize that was why my code was sort of pink/reddish. Thanks a lot, will try to fix those errors, and report back. Thanks again for replying! :slight_smile:


#4

Seems like it worked. Thank you so much, I didn’t realize that the pink/red highlights indicate errors. That is super helpful! Thanks again, Kev! :slight_smile: