---
id: bad87fee1348bd9aedc08845
title: Add Font Awesome Icons to all of our Buttons
required:
- link: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css'
raw: true
challengeType: 0
videoUrl: ''
localeTitle: 将Font Awesome Icons添加到我们所有的按钮中
---
## Description
Font Awesome是一个方便的图标库。这些图标是矢量图形,以.svg
文件格式存储。这些图标就像字体一样对待。您可以使用像素指定其大小,并且它们将采用其父HTML元素的字体大小。使用Font Awesome将info-circle
图标添加到信息按钮,将trash
图标添加到删除按钮。注意: span
元素是下面方向的i
元素的可接受替代方法。
## Instructions
## Tests
```yml
tests:
- text: 您应该在info按钮元素中添加<i class="fa fa-info-circle"></i>
。
testString: assert($(".btn-info > i").is(".fas.fa-info-circle") || $(".btn-info > span").is(".fas.fa-info-circle"));
- text: 您应该在删除按钮元素中添加<i class="fa fa-trash"></i>
。
testString: assert($(".btn-danger > i").is(".fas.fa-trash") || $(".btn-danger > span").is(".fas.fa-trash"));
- text: 确保每个i
元素都有一个结束标记, <i class="fa fa-thumbs-up"></i>
就在你的按钮元素中。
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")));
```
## Challenge Seed
```html
Things cats love:
- cat nip
- laser pointers
- lasagna
Top 3 things cats hate:
- flea treatment
- thunder
- other cats
```
## Solution
```js
// solution required
```