A presença de ícones que explicitem para o usuário do que se trata aquela opção é muito importante em qualquer tipo de aplicação, principalmente em soluções web e mobile. Nessa documentação, conheceremos as opções oferecidas pelo Bootstrap, isto é, analisaremos alguns dos seus ícones, também chamados de glyphicons.
Classes CSS para glyphicons
Os glyphicons fazem parte de um conjunto de elementos que normalmente não está disponível aos desenvolvedores de forma gratuita. Entretanto, o Bootstrap, através de um acordo, consegue fornecer vários deles sem custo, para que seja possível a criação de experiências melhores para os usuários. O Bootstrap pede apenas, como agradecimento, que haja alguma referência ao website desses ícones, o http://glyphicons.com/, sempre que possível.
No Bootstrap, esses ícones são controlados através de classes CSS. Assim, sua utilização acaba sendo muito simples. Todos eles possuem a classe base glyphicon e uma classe específica, que representa o ícone de fato. Por exemplo, glyphicon glyphicon-plus representa o ícone “+” e glyphicon glyphicon-search representa o ícone da busca. A seguir temos os elementos listados no website do Bootstrap, na seção de componentes.
Utilização dos glyphicons
Para utilizar os glyphicons do Bootstrap, duas regras devem ser respeitadas:
- Não misturar os ícones com outros componentes;
- Utilizá-los apenas em elementos vazios.
Embora a adoção dos ícones faça sentido especialmente quando temos texto e ícone, como ocorre em um botão, as classes dos ícones não podem estar em um mesmo elemento que outras classes. Dessa forma, algo como o código a seguir, por exemplo, é incorreto e não trará o resultado esperado, como mostra a Figura 1.
<button class="btn btn-default glyphicon glyphicon-search">Buscar</button>
Embora, como podemos observar pela Figura 1, tenhamos o botão com um ícone e o texto, detalhes como o padding e a própria fonte do texto não estão da forma esperada.
Esses problemas recaem sobre as duas regras básicas que temos para o uso de glyphicons no Bootstrap. Ao quebrarmos essas regras, obtemos um botão que não é visualmente tão interessante quanto poderia ser.
O código ideal para esse caso corrige esses defeitos e é apresentado a seguir:
<button class="btn btn-default">
Buscar <span class="glyphicon glyphicon-search"></span>
</button>
Note que, agora, temos um elemento <button> apenas com suas classes padrão (btn btn-default). Dentro dele, por outro lado, temos o ícone, posicionado após o texto. Repare que esse ícone foi declarado em um novo elemento, <span>. Assim, os detalhes das classes do botão serão respeitados, trazendo o padding correto, bem como a fonte do texto. Além disso, há, também, mais controle sobre o local onde desejamos posicionar o ícone, uma vez que ele poderia ser inserido antes do texto sem qualquer problema. A Figura 2 mostra o resultado desse novo código.
Com isso, verificamos que a utilização dos glyphicons é relativamente simples, desde que suas regras sejam respeitadas. É importante ressaltar, também, que eles podem ser utilizados com qualquer elemento, e não apenas botões, por exemplo: é comum encontrarmos esses ícones em mensagens de erro, barras de navegação e formulários.