--description--

Font Awesome is a convenient library of icons. These icons can be web fonts or vector graphics. 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.

--instructions--

Use Font Awesome to add an info-circle icon to your info button and a trash icon to your delete button.

Note: You can use either i or span elements to complete this challenge.

--hints--

You should add a  within your info button element.

assert.isTrue(
  document.querySelector('.btn-info > i')?.classList?.value === 'fas fa-info-circle' ||
    document.querySelector('.btn-info > span')?.classList?.value === 'fas fa-info-circle'
);

You should add a  within your delete button element.

assert.isTrue(
  document.querySelector('.btn-danger > i')?.classList?.value === 'fas fa-trash' ||
    document.querySelector('.btn-danger > span')?.classList?.value === 'fas fa-trash'
);

Each of your i elements should have a closing tag and  is in your like button element.

assert.match(code,/<\/i>|<\/span/g);
assert.lengthOf(code.match(/<\/i|<\/span>/g),4)
assert.isTrue(
    document.querySelector('.btn-primary > i')?.classList?.value === 'fas fa-thumbs-up' ||
      document.querySelector('.btn-primary > span')?.classList?.value === 'fas fa-thumbs-up'
);

--seed--

--seed-contents--

html

<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="#"></a>
    </div>
  </div>
  
  <div class="row">
    <div class="col-xs-4">
      <button class="btn btn-block btn-primary"><i class="fas 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>catnip</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>

--solutions--