179 lines
5.7 KiB
Markdown
179 lines
5.7 KiB
Markdown
---
|
|
id: bad87fee1348bd9aedc08845
|
|
title: Füge Font Awesome Icons zu all unseren Buttons hinzu
|
|
challengeType: 0
|
|
forumTopicId: 16637
|
|
required:
|
|
-
|
|
link: 'https://use.fontawesome.com/releases/v5.8.1/css/all.css'
|
|
raw: true
|
|
dashedName: 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 `<i class="fas fa-info-circle"></i>` innerhalb deines `info` Button-Elements hinzufügen.
|
|
|
|
```js
|
|
assert(
|
|
$('.btn-info > i').is('.fas.fa-info-circle') ||
|
|
$('.btn-info > span').is('.fas.fa-info-circle')
|
|
);
|
|
```
|
|
|
|
Du sollst einen `<i class="fas fa-trash"></i>` innerhalb deines `delete`-Button-Elements hinzufügen.
|
|
|
|
```js
|
|
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 `<i class="fas fa-thumbs-up"></i>` ist in deinem `like` Button-Element.
|
|
|
|
```js
|
|
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--
|
|
|
|
```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="#"><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--
|
|
|
|
```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="#"><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>
|
|
```
|