---
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'
raw: true
challengeType: 0
videoUrl: ''
localeTitle: Adicione ícones de fonte impressionante aos nossos botões
---
## Description
Font Awesome é uma conveniente biblioteca de ícones. Esses ícones são gráficos vetoriais, armazenados no formato de arquivo .svg . Esses ícones são tratados como fontes. Você pode especificar seu tamanho usando pixels e eles assumirão o tamanho da fonte de seus elementos HTML pai. Você pode incluir o Font Awesome em qualquer aplicativo adicionando o seguinte código ao topo do seu 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"> Neste caso, nós já adicionamos para você nesta página nos bastidores. O elemento i foi originalmente usado para criar outros elementos em itálico, mas agora é comumente usado para ícones. Você pode adicionar as classes Font Awesome ao elemento i para transformá-lo em um ícone, por exemplo: <i class="fa fa-info-circle"></i> Observe que o elemento span também é aceitável para uso com ícones . Use Font Awesome para adicionar um ícone de thumbs-up ao seu botão like, dando a ele um elemento i com as classes fa e fa-thumbs-up ; não se esqueça de manter o texto "Like" ao lado do ícone.
## Instructions
## Tests
```yml
tests:
- text: Adicione um elemento i com as classes fa e 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: Seu ícone fa-thumbs-up aprovação deve estar localizado no botão Curtir.
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.");'
- text: Aninhe seu elemento i no seu elemento de button .
testString: 'assert($("button").children("i").length > 0 || $("button").children("span").length > 0, "Nest your i element within your button element.");'
- text: Certifique-se de que seu elemento de ícone tenha uma tag de fechamento.
testString: 'assert(code.match(/<\/i>|<\/span>/g), "Make sure your icon element has a closing tag.");'
```
## Challenge Seed