Could Someone Explain Why I Get the Thumbs Up inside the Like Button on my App as directed, but don't get the question right to advance?

Could Someone Explain Why I Get the Thumbs Up inside the Like Button on my App as directed, but don't get the question right to advance?
0

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

#2

You need to first tell us the name of the challenge you are working on and/or supply the url to the challenge. Also, can you post your all of the challenge code and not just a small portion? It really can help us debug faster for you.


#3

Hi Randell,

Add Font Awesome Icons to our Buttons #71 Lesson is what I am working on.
Here’s the link to the url and the thumbs up inside the Like button as directed below and my challenge code.
Thanks so much for your kindness!


<p>
<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">
      <button class="btn btn-block btn-danger">
        <i class="fa fa-thumbs-up"></i>Like</button>
    </div>
          <a href="#"><img class="img-responsive thick-green-border" src='//discourse-user-assets.s3.amazonaws.com/original/3X/6/1/61a3499c5abb165be990aa0c1abd23342e60c663.jpg' alt="A cute orange cat lying on its back. "></a>
    </div>
  </div>
  <img src='//discourse-user-assets.s3.amazonaws.com/original/3X/3/c/3c47237055bb6d7d55434a9f85a2c0ae6bfc14e0.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">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>

#4

The existing Like button is where the challenge expects the thumbs up icon. You appear to have added another Like button to your code.


#5

Hi Randell,

I still can’t figure this on out. I tried what you suggested, but it still didn’t work for me. You never mentioned where you put the “fa fa-thumbs-up” part?

Then I tried this and got the button with the thumbs up removed from the top and closer to the bottom Like button, only it is on the outside–not inside as it should be.

Below is my code:


<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>
  
  <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<button><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>

#6

In my previous reply, I said “The existing Like button is where the challenge expects the thumbs up icon”.

You do not have to add an additional button element to pass this challenge. You just need to nest the icon inside the existing Like button element.

Your latest code (below) is trying to add a button within a button. I have highlighted in yellow the part that does not belong.

image


#7

Hi Randell,

Thank you so much. This one was super confusing for me since this was two separate button classes.


#8

tyfvsyuzvhvztycahudb6gus hyuhu


#9

@mebby

thanks alot it really work out for me

sorry mistake