Por fin después de tanto luchar ya hallamos la respuesta de esta interrogante que agunos usuarios de este espacio tienen. Si deseas compartir algún detalle puedes compartir tu comentario.
Solución:
los navbar-toggler-icon
(hamburguesa) en Bootstrap 4 usa un SVG background-image
. Hay 2 “versiones” de la imagen del icono del conmutador. Uno para una barra de navegación clara y otro para una barra de navegación oscura…
- Usar
navbar-dark
para alternar claro/blanco sobre fondos más oscuros - Usar
navbar-light
para alternar oscuro/gris sobre fondos más claros
// this is a black icon with 50% opacity
.navbar-light .navbar-toggler-icon
background-image: url("data:image/svg+xml;..");
// this is a white icon with 50% opacity
.navbar-dark .navbar-toggler-icon
background-image: url("data:image/svg+xml;..");
Por lo tanto, si desea cambiar el color de la imagen del conmutador a otra cosa, puede personalizar el icono. Por ejemplo, aquí configuro el valor RGB en rosa (255,102,203). Observe la stroke='rgba(255,102,203, 0.5)'
valor en los datos SVG:
.custom-toggler .navbar-toggler-icon
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,102,203, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
.custom-toggler.navbar-toggler
border-color: rgb(255,102,203);
Manifestación http://www.codeply.com/go/4FdZGlPMNV
OFC, otra opción para usar un ícono de otra biblioteca, es decir: Font Awesome, etc.
Actualizar Bootstrap 4.0.0:
A partir de Bootstrap 4 Beta, navbar-inverse
es ahora navbar-dark
para usar en barras de navegación con colores de fondo más oscuros para producir enlaces más claros y colores de alternancia.
Cómo cambiar los colores de la barra de navegación de Bootstrap 4
Use un ícono de fuente impresionante como el ícono predeterminado de su barra de navegación.
O intente esto en versiones antiguas de fuentes increíbles:
solo inserta la clase navbar-dark
o navbar-light
en el elemento de navegación:
Recuerda que tienes concesión de comentar si topaste tu inconveniente .