Bootstrap - Add Font Awesome Icons to our Buttons

HTML-CSS
1

Tell us what’s happening:

The tutor prompt says your icon element should have a closing tag.
But it already has a closing tag…

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://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
    </div>
  </div>
  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" 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="fas fa-thumbs-up">Like</i></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="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>
  </form>
</div>

Your browser information:

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

Challenge Information:

Bootstrap - Add Font Awesome Icons to our Buttons

2

Like is the button text, not the i text,

3

so whats the i text?

4

It doesn’t have any text, it is only used for the icon.

5

wait arent we wrapping the like in the i text?

6

No, the text belongs in the button. It is the button text.

We are just adding an icon to it. That doesn’t mean changing the button text, it just means adding an i element inside it.

7

like this?:

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

No, i is an element you add inside the button element. It isn’t an attribute on the button element

Example:

<button>Warning<i class="fa-solid fa-triangle-exclamation"></i></button>
9

Thank you for the help,
it still returns your icon element should have a closing tag though…

10

Post your latest code.

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

The icon should come before the text.

13

Thats the first time im seeing any code being written like that…

14

font awesome is a common way to add icons, and it works like that: you add the empty i element with the right classes and an icon appears

15

The other coding element that has a similar construction is the img tag, but that does not have any closing tag, so it feels kind of weird…

16

it’s true, it’s weird, but it’s how it works