Estoy utilizando un fondo blanco en un Carrusel usando Bootstrap 4.0 y quisiera cambiar el color de los controles. Parece que bootstrap ahora utiliza SVG para su carrusel de iconos. Esto significa que la alteración de los atributos directamente no funciona.

Actualmente estoy utilizando la Fuente Impresionante de otros elementos en el sitio, así que si hay una forma de uso fa-angulares y formato de los en su lugar, y aún así se comportan de la misma con respecto a cambiar el tamaño y formato, que podría ser una solución eficaz así.

Aquí está mi código actual para los elementos de control:

<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
</a>

Me encontré con una pregunta similar aquí pero no fue capaz de dar sentido a la respuesta no.

También encontré este página en GitHub, pero no fue capaz de hacer ninguna de las respuestas, no hay trabajo para mí.

  • ¿Cuál es la diferencia entre la fa-angulares y el valor predeterminado de Bootstrap controles? Yo no veo ninguna diferencia sustancial.
  • bien visualmente es el mismo, sin embargo con el fa-angulares yo podría, en teoría, cambiar el color directamente. Desde bootstrap controles de usar SVG, yo no podía alterar el color directamente mediante el uso de css. Yo estoy seguro de si hay una forma sencilla y fiable para reemplazar los archivos de inicio de los controles con el fa-angulares sin alterar algunos de los secretos de comportamiento, ya que no tengo mucha experiencia con bootstrap.
InformationsquelleAutor Ben Kramer | 2018-03-20

1 Comentario

  1. 37

    No hay necesidad para cualquier innecesarios hacks de css.

    Si desea modificar cualquiera de Bootstrap css (o el carrusel de colores de control, en particular), puede hacerlo fácilmente.

    Aquí están las reglas que controlan el color del carrusel de controles:

    .carousel-control-prev-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
    }
    
    .carousel-control-next-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
    }

    Reemplazar el fff en el fill='%23fff' partes con el código hexadecimal del color deseado.

    Aquí un trabajo fragmento de código donde fill='%23fff' ha sido reemplazado con fill='%23f00' de color rojo en vez de blanco:

    HTML:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <style>
    .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f00' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
    }
    .carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f00' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
    }
    </style>
    <div class="container">
    <div class="row">
    <div class="col">
    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
    <div class="carousel-item active">
    <img class="d-block w-100" src="https://placeimg.com/800/400/animals" alt="First slide">
    </div>
    <div class="carousel-item">
    <img class="d-block w-100" src="https://placeimg.com/800/400/arch" alt="Second slide">
    </div>
    <div class="carousel-item">
    <img class="d-block w-100" src="https://placeimg.com/800/400/nature" alt="Third slide">
    </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
    </a>
    </div>
    </div>
    </div>
    </div>

    • He intentado colocar tu código en mi css personalizado y modificar el color a #ccc. Cuando eso no he incluido !importante darle prioridad. En el inspector, el color de la muestra como #ccc, sin embargo en bootstrap 4 carrusel, esos indicadores no cambian de color con el color de la variable. Como he aprendido de los orígenes vinculados, esto es debido a que el cambio de SVG para estos iconos. Lo que me dijo apreciamos sus comentarios. Gracias
    • Acaba de actualizar mi respuesta con un fragmento de código. Yo estaba equivocado en mi primera respuesta.
    • Se está trabajando ahora, gracias! Además de su respuesta que necesitaba para agregar !importante para cada imagen de fondo en mi hoja de estilos. de lo contrario, el valor es sobrescrito de la importación de hoja de estilos

Dejar respuesta

Please enter your comment!
Please enter your name here