Carrusel Bootstrap con Font Awesome

Como sabrás, Bootstrap importa la librería de fuentes Glyphicons para el uso de iconos en la maquetación. Son dos de estos iconos los que utiliza internamente en la construcción del componente Carousel para los controles de cambio de imagen.

En mi caso prefiero importar la librería Font Awesome y evitar Glyphicons, lo que me ha obligado a sustituir estos iconos de control. Al principio pensaba encontrarme todo hecho simplemente sustituyendo las clases de los iconos, pero viendo el resultado es necesario incorporar algo de CSS (o LESS ¿todavía no conoces LESS?) para que el resultado quede responsivo y los iconos perfectamente alineados. Explico como hacerlo correctamente.

Primero en nuestro html hay que sustituir los iconos de control del carrusel por algunos equivalentes en Font Awesome, en mi caso he pasado de:

<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
     <span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
     <span class="glyphicon glyphicon-chevron-right"></span>
</a>

a:

<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
     <span class="fa fa-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
     <span class="fa fa-chevron-right"></span>
</a>

Esto hará tus iconos font-awesome visibles en el carrusel, pero no estarán correctamente alineados, para ello destripé las librerías LESS de Bootstrap para ver los estilos propios de esos iconos y añadí el siguiente código CSS a mi hoja de estilos):

.fa-chevron-left, .fa-chevron-right {
     position: absolute;
     top: 50%;
     z-index: 5;
     display: inline-block;
}

.fa-chevron-left {
     left: 50%;
}

.fa-chevron-right {
     right: 50%;
}

@media screen and (min-width: 768px) {

     .fa-chevron-left, .fa-chevron-right {
          width: 30px;
          height: 30px;
          margin-top: -15px;
          margin-left: -15px;
          font-size: 30px;
     }

}

Con esto tendríamos nuestro carrusel Bootstrap con iconos de Font Awesome. Recomiendo usar selectores de ID en el código CSS que os he puesto para que estos estilos sólo afecten a los iconos que se encuentren dentro del carrusel y no en todos los de nuestra web, aquí los he omitido por no entretenerme demasiado 🙂

Anuncios

Un pensamiento en “Carrusel Bootstrap con Font Awesome

  1. yo febrero 22, 2016 en 1:40 am

    Muchas gracias, me sirvio de mucho tu información, saludos desde México

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: