.svg
file format. 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.
+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.
Use Font Awesome to add an info-circle
icon to your info button and a trash
icon to your delete button.
Note: The span
element is an acceptable alternative to the i
element for the directions below.
span
element is an acceptable alternative to the i<
```yml
tests:
- - text: You should add a <i class="fa fa-info-circle"></i>
within your info button element.
- testString: assert($(".btn-info > i").is(".fa.fa-info-circle") || $(".btn-info > span").is(".fa.fa-info-circle"), 'You should add a <i class="fa fa-info-circle"></i>
within your info button element.');
- - text: You should add a <i class="fa fa-trash"></i>
within your delete button element.
- testString: assert($(".btn-danger > i").is(".fa.fa-trash") || $(".btn-danger > span").is(".fa.fa-trash"), 'You should add a <i class="fa fa-trash"></i>
within your delete button element.');
- - text: Make sure each of your i
elements has a closing tag and <i class="fa fa-thumbs-up"></i>
is in your like button element.
- testString: assert(code.match(/<\/i>|<\/span/g) && code.match(/<\/i|<\/span>/g).length > 2 && ($(".btn-primary > i").is(".fa.fa-thumbs-up") || $(".btn-primary > span").is(".fa.fa-thumbs-up")), 'Make sure each of your i
elements has a closing tag and <i class="fa fa-thumbs-up"></i>
is in your like button element.');
+ - text: You should add a <i class="fas fa-info-circle"></i>
within your info button element.
+ testString: assert($(".btn-info > i").is(".fas.fa-info-circle") || $(".btn-info > span").is(".fas.fa-info-circle"), 'You should add a <i class="fas fa-info-circle"></i>
within your info button element.');
+ - text: You should add a <i class="fas fa-trash"></i>
within your delete button element.
+ testString: assert($(".btn-danger > i").is(".fas.fa-trash") || $(".btn-danger > span").is(".fas.fa-trash"), 'You should add a <i class="fas fa-trash"></i>
within your delete button element.');
+ - text: Make sure each of your i
elements has a closing tag and <i class="fas fa-thumbs-up"></i>
is in your like button element.
+ testString: 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")), 'Make sure each of your i
elements has a closing tag and <i class="fas fa-thumbs-up"></i>
is in your like button element.');
```
@@ -67,7 +67,7 @@ tests:
-
+
@@ -136,13 +136,13 @@ tests:
-
+
-
+
-
+
Things cats love:
diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-our-buttons.english.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-our-buttons.english.md
index 8ad30d17416..f079cd95aa2 100644
--- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-our-buttons.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-our-buttons.english.md
@@ -2,21 +2,21 @@
id: bad87fee1348bd9aedd08845
title: Add Font Awesome Icons to our Buttons
required:
- - link: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css'
+ - link: 'https://use.fontawesome.com/releases/v5.8.1/css/all.css'
raw: true
challengeType: 0
---
## Description
-Font Awesome is a convenient library of icons. These icons are vector graphics, stored in the .svg
file format. 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.
+Font Awesome is a convenient library of icons. These icons can be webfonts 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.
You can include Font Awesome in any app by adding the following code to the top of your HTML:
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous">
+<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
In this case, we've already added it for you to this page behind the scenes.
The i
element was originally used to make other elements italic, but is now commonly used for icons. You can add the Font Awesome classes to the i
element to turn it into an icon, for example:
-<i class="fa fa-info-circle"></i>
+<i class="fas fa-info-circle"></i>
Note that the span
element is also acceptable for use with icons.
-Use Font Awesome to add a thumbs-up
icon to your like button by giving it an i
element with the classes fa
and fa-thumbs-up
; make sure to keep the text "Like" next to the icon.
+Use Font Awesome to add a thumbs-up
icon to your like button by giving it an i
element with the classes fas
and fa-thumbs-up
; make sure to keep the text "Like" next to the icon.
## Instructions
@@ -29,10 +29,10 @@ Use Font Awesome to add a thumbs-up
icon to your like button by giv
```yml
tests:
- - text: Add an i
element with the classes fa
and fa-thumbs-up
.
- testString: assert($("i").is(".fa.fa-thumbs-up") || $("span").is(".fa.fa-thumbs-up"), 'Add an i
element with the classes fa
and fa-thumbs-up
.');
+ - text: Add an i
element with the classes fas
and fa-thumbs-up
.
+ testString: assert($("i").is(".fas.fa-thumbs-up") || $("span").is(".fas.fa-thumbs-up"), 'Add an i
element with the classes fas
and fa-thumbs-up
.');
- text: Your fa-thumbs-up
icon should be located within the Like button.
- testString: assert(($("i.fa-thumbs-up").parent().text().match(/Like/gi) && $(".btn-primary > i").is(".fa.fa-thumbs-up")) || ($("span.fa-thumbs-up").parent().text().match(/Like/gi) && $(".btn-primary > span").is(".fa.fa-thumbs-up")), 'Your fa-thumbs-up
icon should be located within the Like button.');
+ testString: assert(($("i.fa-thumbs-up").parent().text().match(/Like/gi) && $(".btn-primary > i").is(".fas.fa-thumbs-up")) || ($("span.fa-thumbs-up").parent().text().match(/Like/gi) && $(".btn-primary > span").is(".fas.fa-thumbs-up")), 'Your fa-thumbs-up
icon should be located within the Like button.');
- text: Nest your i
element within your button
element.
testString: assert($("button").children("i").length > 0 || $("button").children("span").length > 0, 'Nest your i
element within your button
element.');
- text: Make sure your icon element has a closing tag.
@@ -143,7 +143,7 @@ tests:
-
+