Como unir dos Glyphicon de Bootstrap en botones, accesos de menú…

Para comenzar decir que los Glyphicon no son imágenes, son fuentes (como la fuente de la letra) y por lo tanto esto tiene algunas ventajas interesantes:

  • No se pixela al tratarse de vectores.
  • Ocupan mucho menos espacio que las imágenes corrientes.
  • Al ser fuentes se puede cambiar el color o el tamaño sencillamente usando estilos como: color, font-size….

Una vez esta pequeña introducción comenzaremos por crear la clase que fusionará nuestras dos fuentes de los Glyphicons seleccionados.

EL RESULTADO ES:
unión de dos glyphicon

Se puede ver el ejemplo AQUÍ

Nosotros vamos a seleccionar los siguientes Glyphicon :

  • glyphicon glyphicon-play con código \e072
  • glyphicon glyphicon-pause con código \e074

Para saber el código hay que ir a la hoja de estilo de Boostrap buscar el nombre de la clase, en este caso seria glyphicon-play y obtener su correspondiente código.

Ahora asignamos en nuestra hoja de estilos la fusión de nuestras dos fuentes.

.glyphicon::before  { content: "\e072\e074";}

A continuación lo encapsulamos en un botón:

<button>
   <span class="glyphicon" aria-hidden="true"></span>
</button>

Se ha introducido dentro de un botón, pero perfectamente se podría incluirse en otros contextos como inputs, opciones de menú, listas…

Iván Martínez

Ingeniero Informático apasionado por el mundo del desarrollo WEB. Me gusta caminar por este mundo lleno de tecnologías y día a día aprender cosas nuevas como el doctor Frankenstein ¡dadme cosas para experimentar!

Deja un comentario

Tu dirección de correo electrónico no será publicada.