Bootstrap fuente icono (Glyphicons)

En este capítulo se explicará el icono de fuente (Glyphicons), y algunos ejemplos para comprender su uso. formatos de fuente de rutina de carga incluido con más de 200 glifos. En primer lugar, debemos primero entender lo que es el icono de fuente.

¿Cuál es el icono de fuente?

Fuentes icono es una fuente icono utilizado en el proyecto Web. Aunque, los medianos Glyphicons necesitan para uso comercial, pero se puede basado en proyecto Bootstrap para el uso libre de estos iconos.

Con el fin de expresar la gratitud icono de autor, espero que añadir enlaces GLYPHICONS sitio durante el uso.

Obtener el icono Fuentes

Tenemos los instalados ambiente capítulos descargar la versión 3.x Bootstrap, y comprender su estructura de directorios. En lasfuentesiconos de la carpeta puede encontrar la fuente que contiene estos ficheros los siguientes:

• glyphicons-medianos-regular.eot
• glyphicons-medianos-regular.svg
• glyphicons-medianos-Regular.ttf
• glyphicons-medianos-regular.woff

reglas CSS relacionadas escritos en la carpetadistbootstrap.css css carpeta yde arranque-min.cssdentro del archivo.

Fuentes lista de iconos

Haga clic aquí para ver la lista de icono de las fuentes disponibles.

la interpretación de las reglas CSS

La siguiente regla CSS constituye glyphicon clase.

@ Font-face {
  font-family: 'Glyphicons Medianos';
  src: url ( '../ / fonts glyphicons-medianos-regular.eot');
  src: url ( '../ #iefix fuentes / glyphicons-medianos-regular.eot?') formato ( "embedded-opentype '), url (' ../ fuentes / glyphicons-medianos-regular.woff ') formato ( 'woff'), url ( '../ fuentes / glyphicons-medianos-Regular.ttf') formato ( 'True Type'), url ( '../ fuentes / glyphicons-medianos-regular.svg # glyphicons_halflingsregular') formato ( 'svg');
}

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Medianos';
  -webkit-font-suavizado: suavizado;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -moz-osx-font-suavizado: escala de grises;
}

Así que la regla font-face es de hecho el lugar para encontrar la declaración glyphicons fuente-familia y la ubicación.

clase .glyphicon declarar un desplazamiento desde la parte superior de 1px posición relativa, rendida como inline-block, las fuentes de los estados, disposiciones de tipo fuente y el peso es normal, ajuste la altura de la fila a 1. Además, el uso de webkit-font-suavizado: suavizado de bordes y -moz-osx-font-suavizado: escala de grises; conseguir la coherencia entre navegadores.

Entonces, donde

.glyphicon: vacío {
  anchura: 1 em;
}

glyphicon vacía.

Hay 200 clases, cada clase de un icono. Estos clase de formato común es el siguiente:

.glyphicon en palabras clave: {antes
  contenido: "HexValue";
}

Por ejemplo, iconos de usuario a utilizar, es la clase de la siguiente manera:

.glyphicon usuario: antes de {
  contenido: "\ E008";
}

uso

Para utilizar un icono, basta con utilizar el siguiente código. Por favor, mantenga el espacio adecuado entre los iconos y texto.

<Span class = "glyphicon glyphicon-búsqueda"> </ span>

El siguiente ejemplo muestra cómo utilizar el icono Fuentes:

Los resultados son los siguientes:

icono de fuente con la barra de navegación

icono Fuentes de encargo

Hemos visto cómo utilizar el icono Fuentes, entonces vemos cómo personalizar el icono de fuente.

Vamos a empezar el ejemplo anterior, cambiando el tamaño de la fuente, el color y aplicar la sombra de texto a ser icono personalizado.

A continuación se inicia el código:

<Tipo botón = "botón" class = "btn btn-primaria BTN-lg">
  <Class = "glyphicon usuario glyphicon" span> </ span> Usuario
</ Button>

El efecto es el siguiente:

Tamaño de fuente personalizado

Al aumentar o disminuir el tamaño de fuente del icono, puede hacer que el icono aparezca más grande o más pequeño.

<Tipo botón = "botón" class = "btn btn-primaria BTN-lg" style = "font-size: 60px">
  <Class = "glyphicon usuario glyphicon" span> </ span> Usuario
</ Button>

color de fuente personalizada

<Tipo botón = "botón" class = "btn btn-primaria BTN-lg" style = "color: rgb (212, 106, 64);">
  <Class = "glyphicon usuario glyphicon" span> </ span> Usuario
</ Button>

Aplicar sombra del texto

<button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;">
  <span class="glyphicon glyphicon-user"></span> User
</button>

icono de fuente personalizada en línea

Haga clic aquí para personalizar el icono de fuente >>

lista de iconos