Glificons bootstrap

Esta é uma biblioteca de ícones monocromáticos disponíveis em formatos de imagem raster, formatos de imagem vetorial e como fontes. Ele fornece mais de 250 glifos em formato de fonte. Você pode usar essas fontes em seus projetos da web. Esses glifos não são gratuitos, no entanto, se você não precisar gastar nada no caso de usá-los em projetos baseados no Bootstrap.

Carregando a fonte (biblioteca)

Para carregar a biblioteca Bootstrap Glyphicons, copie e cole a seguinte linha na seção <head> da página da web.

<head>
   <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>

Usando o ícone

O Bootstrap Glyphicons fornece vários ícones. Escolha um deles e adicione o nome da classe do ícone a qualquer elemento HTML dentro da tag <body>. No exemplo a seguir, usamos o ícone da árvore e seu nome de classe étree-deciduous.

<html>
   <head>
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
   </head>
	
   <body>
      <i class = "glyphicon glyphicon-tree-deciduous"> </i>
   </body>
</html>

Ele produzirá a seguinte saída -

Definindo o tamanho

Você pode aumentar ou diminuir o tamanho de um ícone definindo seu tamanho no CSS e usando-o junto com o nome da classe conforme mostrado abaixo. No exemplo a seguir, definimos o tamanho como 6 em.

<html>
   <head>
      <link rel="stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><style>
      i.mysize {font-size: 6em;}
      </style>
   </head>
 
   <body>
      <i class="glyphicon glyphicon-tree-deciduous mysize"></i>
   </body>
</html>

Ele produzirá a seguinte saída:

Definindo a cor

Você pode definir a cor de um ícone usando o CSS. O exemplo a seguir mostra como alterar a cor do ícone da árvore.

<html>
   <head>
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><style>
      i.mysize {font-size: 6em; color: blue;}
      </style>
   </head>
 
   <body>
      <i class="glyphicon glyphicon-tree-deciduous mysize"></i>
   </body>
</html>

Ele produzirá a seguinte saída -

Next page ↱