5.7 KiB

Raw Blame History

title

challengeType

forumTopicId

required

dashedName

bad87fee1348bd9aedc08845

Füge Font Awesome Icons zu all unseren Buttons hinzu

16637

link	raw
https://use.fontawesome.com/releases/v5.8.1/css/all.css	true

add-font-awesome-icons-to-all-of-our-buttons

--description--

Font Awesome ist eine komfortable Bibliothek für Icons. Diese Icons können Web Fonts (Schriften) oder Vektorgrafiken sein. Diese Icons werden genau wie Schriftarten behandelt. Du kannst ihre Größe mithilfe von Pixeln angeben und sie nehmen die Schriftgröße ihrer übergeordneten HTML-Elementen an.

--instructions--

Benutze Font Awesome um ein info-circle-Icon zu deinem Informationsbutton hinzuzufügen und ein trash-Icon zu deinem Lösch-Button.

Hinweis: Das span Element ist eine akzeptable Alternative zum i-Element für die untenstehenden Anweisungen.

--hints--

Du solltest ein  innerhalb deines info Button-Elements hinzufügen.

assert(
  $('.btn-info > i').is('.fas.fa-info-circle') ||
    $('.btn-info > span').is('.fas.fa-info-circle')
);

Du sollst einen  innerhalb deines delete-Button-Elements hinzufügen.

assert(
  $('.btn-danger > i').is('.fas.fa-trash') ||
    $('.btn-danger > span').is('.fas.fa-trash')
);

Jedes deiner i Elemente sollte ein abschließendes Tag haben und  ist in deinem like Button-Element.

assert(
  code.match(/<\/i>|<\/span/g) &&
    code.match(/<\/i|<\/span>/g).length > 2 &&
    ($('.btn-primary > i').is('.fas.fa-thumbs-up') ||
      $('.btn-primary > span').is('.fas.fa-thumbs-up'))
);

--seed--

--seed-contents--

<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"></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="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--

<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"></i> Like</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-info"><i class="fas fa-info-circle"></i> Info</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-danger"><i class="fas fa-trash"></i> 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>

5.7 KiB Raw Blame History