Glifos de Bootstrap

Esta es una biblioteca de iconos monocromáticos disponibles en formatos de imágenes rasterizadas, formatos de imágenes vectoriales y como fuentes. Proporciona más de 250 glifos en formato de fuente. Puede utilizar estas fuentes en sus proyectos web. Estos glifos no son gratuitos, sin embargo, si no tiene que gastar nada en caso de que los esté usando en proyectos basados en Bootstrap.

Cargando la fuente (biblioteca)

Para cargar la biblioteca Bootstrap Glyphicons, copie y pegue la siguiente línea en la sección <head> de la página web.

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

Usando el icono

Bootstrap Glyphicons proporciona una serie de iconos. Elija uno de ellos y agregue el nombre de la clase de icono a cualquier elemento HTML dentro de la etiqueta <body>. En el siguiente ejemplo, hemos utilizado el icono del árbol y su nombre de clase estree-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>

Producirá la siguiente salida:

Definiendo el tamaño

Puede aumentar o disminuir el tamaño de un icono definiendo su tamaño en el CSS y usándolo junto con el nombre de la clase como se muestra a continuación. En el siguiente ejemplo, hemos definido el tamaño como 6 cm.

<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>

Producirá la siguiente salida:

Definiendo el color

Puede definir el color de un icono utilizando CSS. El siguiente ejemplo muestra cómo cambiar el color del icono del árbol.

<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>

Producirá la siguiente salida:

Next page ↱