Bootstrap 3: Glyphicons
Gabarito: letra B. No Bootstrap 3, os ícones são exibidos com a classe glyphicon seguida da classe específica do ícone, ambas no mesmo elemento. O ícone de círculo com X (remover/excluir) é glyphicon-remove-circle, portanto o código correto é <span class="glyphicon glyphicon-remove-circle"></span>. A pegadinha está em alternativas que usam nomes inventados como del-circle ou x-circle, que não existem na biblioteca padrão do Bootstrap 3.
Os Glyphicons são uma família de ícones de fonte incluída no Bootstrap 3, que permite adicionar ícones sem imagens externas. Para usar um ícone, você precisa de duas classes no mesmo elemento: a classe base glyphicon e a classe específica do ícone, que sempre começa com glyphicon-. Por exemplo, glyphicon-home para uma casa, glyphicon-user para um usuário, glyphicon-remove para um X simples e glyphicon-remove-circle para um X dentro de um círculo. A classe base glyphicon define o estilo da fonte e o posicionamento, enquanto a classe específica define qual caractere da fonte será exibido.
A nomenclatura dos ícones no Bootstrap 3 segue um padrão descritivo em inglês. Para o ícone de remover/excluir, existem duas variações: glyphicon-remove (apenas o X) e glyphicon-remove-circle (o X dentro de um círculo). A imagem da questão mostra o ícone com o X dentro de um círculo, então a classe correta é glyphicon-remove-circle. É importante notar que o Bootstrap 3 não possui classes como del-circle ou x-circle — essas são invenções dos distratores. O prefixo glyphicon- é obrigatório em ambas as classes: a base e a específica.
Na prática, ao usar o Bootstrap 3, o desenvolvedor escreve:
<span class="glyphicon glyphicon-remove-circle"></span>
Esse código renderiza o ícone de círculo com X. A primeira classe glyphicon aplica o estilo base da fonte de ícones, e a segunda glyphicon-remove-circle seleciona o glifo específico. Sem a classe base, o ícone não aparece corretamente; sem a classe específica, nenhum ícone é exibido.
A banca explora a confusão entre os nomes dos ícones e a estrutura das classes. O candidato pode lembrar que existe um ícone de "remover" e tentar usar del-circle ou x-circle, mas esses nomes não existem na biblioteca. O correto é sempre consultar a documentação oficial do Bootstrap 3, que lista todos os ícones disponíveis com seus nomes exatos. A regra de ouro: a classe específica sempre começa com glyphicon- e o nome é em inglês descritivo.
Alternativa A — ❌ Incorreta
A classe glyphicon-del-circle não existe no Bootstrap 3. O prefixo del não é usado na nomenclatura dos ícones; o correto para remover é remove. A banca troca remove por del para confundir quem tenta adivinhar o nome.
Alternativa B — ✅ Correta ⟵ GABARITO
Esta é a sintaxe correta: <span class="glyphicon glyphicon-remove-circle"></span>. A classe base glyphicon e a classe específica glyphicon-remove-circle são ambas necessárias e existem na biblioteca padrão do Bootstrap 3, exibindo o ícone de círculo com X.
Alternativa C — ❌ Incorreta
Falta a classe base glyphicon na segunda classe. O código <span class="glyphicon remove-circle"></span> não funciona porque a classe específica deve ser glyphicon-remove-circle, não remove-circle. Sem o prefixo glyphicon-, o navegador não reconhece o ícone.
Alternativa D — ❌ Incorreta
A classe glyphicon del-circle não existe. Assim como na alternativa A, o nome del-circle é inventado; o correto é glyphicon-remove-circle. Além disso, falta o prefixo glyphicon- na segunda classe.
Alternativa E — ❌ Incorreta
A classe glyphicon-x-circle não existe no Bootstrap 3. O nome correto para o ícone de X dentro de círculo é glyphicon-remove-circle, não x-circle. A banca usa x como sinônimo de remover, mas a nomenclatura oficial é remove.
A regra para lembrar: no Bootstrap 3, todo ícone usa glyphicon glyphicon-nome-do-icone. O nome do ícone é sempre em inglês e descritivo. Para o círculo com X, o nome é remove-circle. Não existe del nem x na nomenclatura oficial.
Gabarito: letra B
