COMO TRABALHAR COM ÍCONES NO BOOTSTRAP

Uma das vantagens em se utilizar ícones através do Bootstrap está em evitar o carregamento de imagens no site fora de padrão o que deixa o site mais “pesado” e piora seu desempenho. O Bootstrap resolve este problema de design e estabelece um padrão para desenvolvimento de sites, aplicativos web e também para o desenvolvimento mobile. Na verdade é algo muito simples trabalhar com estes ícones e requer pouco código.

               Para adicionar ícones em nosso site usaremos os Glyphicons que são ícones adicionados em textos, botões, barras de navegação, entre outros usando código CSS. O modo correto de se adicionar os Glyphicons em seu código é através de uma tag <span> contendo uma referência a sua classe específica, segue abaixo a sintaxe básica,

<span class="glyphicon glyphicon-name"></span>

     Veremos agora na íntegra um código em CSS com alguns exemplos básicos de Glyphicons,

<div class="container">

 <h2>Glyphicon Examples</h2>

 <p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>   

 <p>Envelope icon as a link:

   <a href="#"><span class="glyphicon glyphicon-envelope"></span></a>

 </p>

 <p>Search icon: <span class="glyphicon glyphicon-search"></span></p>

 <p>Search icon on a button:

   <button type="button" class="btn btn-default">

     <span class="glyphicon glyphicon-search"></span> Search

   </button>

 </p>

 <p>Search icon on a styled button:

   <button type="button" class="btn btn-info">

     <span class="glyphicon glyphicon-search"></span> Search

   </button>

 </p>

 <p>Print icon: <span class="glyphicon glyphicon-print"></span></p>     

 <p>Print icon on a styled link button:

   <a href="#" class="btn btn-success btn-lg">

     <span class="glyphicon glyphicon-print"></span> Print 

   </a>

 </p> 

</div>

               Testando em um navegador obtemos o seguinte resultado,

Figura 1 - Fonte w3schools.

               Se você não tem interesse em utilizar estes ícones, mas, algum glyphicon específico, você pode visitar a página do Bootstrap e na opção components encontramos uma lista com todos os glyphicons.

Figura 2 - Fonte site oficial do Bootstrap.

               Para utilizar qualquer um destes ícones basta usar a sintaxe básica com a tag <span> e mudar nome do glyphicon da seguinte forma como vemos abaixo no exemplo,

<span class="glyphicon glyphicon-user"></span>

     Teremos então o seguinte resultado,

Figura 3 - Imagem do glyphicon para usuário.

               Para maiores informações visite a página oficial do Bootstrap ou o site da w3schools.

Referências:

http://getbootstrap.com/

http://www.w3schools.com/