Guia Bootstrap

Bootstrap Glyphicons: Aprenda como utilizar

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (8)  (0)

Neste artigo, veremos como utilizar os glyphicons no Bootstrap. Esses elementos fornecem detalhes visuais na forma de ícones que possibilitam a construção de melhores interfaces.

Motivação

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. Um ícone de um carrinho de compras, por exemplo, valoriza muito o link para o carrinho em um website para e-commerce­. Da mesma forma, uma lixeira indica exclusão, um “+”, adição, entre outros. Assim, conhecer uma tecnologia que forneça tais opções pode ser um diferencial durante o desenvolvimento. Nesse artigo, 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 Figura 1 traz alguns desses ícones, disponibilizados no website do Bootstrap, na seção de componentes.

Alguns dos ícones (glyphicons) do Bootstrap
Figura 1. Alguns dos ícones (glyphicons) do Bootstrap

Utilização dos glyphicons

Para utilizar os glyphicons do Bootstrap, duas regras devem ser respeitadas:

  1. Não misturar os ícones com outros componentes;
  2. 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.

<button class="btn btn-default glyphicon glyphicon-search">Buscar</button>

Botão com glyphicon definido de forma incorreta
Figura 2. Botão com glyphicons definido de forma incorreta

Embora, como podemos observar pela Figura 2, 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 3 mostra o resultado desse novo código.

Botão com glyphicon definido de forma correta
Figura 3. Botão com glyphicons definido de forma correta

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.

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Ficou com alguma dúvida?