Saltar al contenido

Cambiar el icono desplegable en Bootstrap 4

Si encuentras alguna parte que no comprendes puedes dejarlo en los comentarios y trataremos de ayudarte lo mas rápido que podamos.

Solución:

Tienes que ocultar el icono de intercalación de esta manera…

.dropdown-toggle::after 
    display: none;

Luego agrega el icono de fontawesome..


http://codeply.com/go/xd2b75iUbM

Osolo quita el dropdown-toggle class desde el botón, ya que su único propósito parece ser mostrar el icono de intercalación.

Hice algo similar a la respuesta aceptada, cambiando el símbolo de intercalación predeterminado a una elipsis vertical de fuente impresionante como esta:

.dropdown-toggle-ellipsis::after 
  display: none;


.dropdown-toggle-ellipsis::before 
  display: inline-block;
  padding: 0.5rem;
  font: normal normal normal 14px/1 FontAwesome;
  content: "f142";

solo aplica dropdown-toggle-ellipsis como una clase adicional a su botón de alternar.

La principal diferencia con esta solución es que el icono real (f142 here) ahora está definido en sus hojas de estilo, no en su marcado. Si eso es una ventaja depende de su situación, por supuesto.

El símbolo de intercalación predeterminado no es un icono, sino un borde con estas propiedades:

border-top: .3em solid;
border-right: .3em solid transparent;
border-bottom: 0;
border-left: .3em solid transparent;

Por lo tanto, si establece .dropdown-toggle::after tener border:none!importantpuedes usar content para establecer el icono que desee.

El código que uso es este:

.dropdown-toggle::after 
  border: none!important;
  font: normal normal normal 14px/1 FontAwesome;
  content: "f107"!important; /* the desired FontAwesome icon */
  vertical-align: 0; /* to center vertically */

Con este método también puedes cambiar el ícono de FontAwesome cuando el menú desplegable está visible, gracias a la clase .show que agrega:

li.menu-item.show a.dropdown-toggle.::after 
  content: "f106"!important /* the different icon */

Sección de Reseñas y Valoraciones

Si para ti ha sido de provecho nuestro post, te agradeceríamos que lo compartas con otros programadores de esta manera nos ayudas a dar difusión a esta información.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *