Font Awesome is a convenient library of icons. These icons are vector graphics, stored in the <code>.svg</code> 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.
Use Font Awesome to add an <code>info-circle</code> icon to your info button and a <code>trash</code> icon to your delete button.
Note: The <code>span</code> element is an acceptable alternative to the <code>i</code> element for the directions below.
- text: You should add a <code><i class="fa fa-info-circle"></i></code> 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 <code><i class="fa fa-info-circle"></i></code> within your info button element.');
- text: You should add a <code><i class="fa fa-trash"></i></code> 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 <code><i class="fa fa-trash"></i></code> within your delete button element.');
- text: Make sure each of your <code>i</code> elements has a closing tag and <code><i class="fa fa-thumbs-up"></i></code> 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 <code>i</code> elements has a closing tag and <code><i class="fa fa-thumbs-up"></i></code> is in your like button element.');