Change Bootstrap 4 Carousel Control Colors

Question

I am using a white background for a Carousel using Bootstrap 4.0 and would like to change the color of the controls. It seems that bootstrap now uses SVG for their carousel icons. This means altering the attributes directly does not work.

I am currently using Font Awesome for other elements on the site as well, so if there is a way to use fa-chevrons and format those instead, and it will still behave the same regarding resizing and formatting, that could be an effective solution as well.

Here is my current code for the control elements:

<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> 

I found a similar question here but was not able to make sense of the answer provided there.

I also found this page on GitHub but was not able to make any of the answers there work for me either.

Answer 1

There's no need for any unnecessary css hacks.

If you want to modify any Bootstrap css (or the carousel control colors in particular), you can easily do that.

Here are the rules that control the color of the carousel controls:

.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"); } 

Replace the fff in the fill='%23fff' parts with the hex code of the desired color.

Here's a working code snippet where fill='%23fff' has been replaced with fill='%23f00' for red instead of white:

<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>

Answer 2

Just insert your own icon inside the carousel-control-next & carousel-control-prev class. For example, I want to change the prev & next icon with Font-Awesome icons. I can do this:

<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">   <!-- INSERT MY OWN PREV ICON USING FONT AWESOME  -->   <i style="font-size: 60px" class="fas fa-arrow-alt-circle-left"></i>   <span class="sr-only">Previous</span> </a>  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">   <!-- INSERT MY OWN NEXT ICON USING FONT AWESOME  -->   <i style="font-size: 60px" class="fas fa-arrow-alt-circle-right"></i>   <span class="sr-only">Next</span> </a> 

Hope it solve your problem