title: Change Bootstrap 4 Carousel Control Colors
body: <p>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.</p>
  
  <p>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. </p>
  
  <p>Here is my current code for the control elements:</p>
  
  <pre><code>&lt;a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"&gt;
              &lt;span class="carousel-control-prev-icon" aria-hidden="true"&gt;&lt;/span&gt;
              &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
  &lt;/a&gt;
  &lt;a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"&gt;
              &lt;span class="carousel-control-next-icon" aria-hidden="true"&gt;&lt;/span&gt;
              &lt;span class="sr-only"&gt;Next&lt;/span&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>I found a similar question <a href="https://stackoverflow.com/questions/47122852/change-color-of-svg-background-image-bootstrap-4-carousel">here</a> but was not able to make sense of the answer provided there. </p>
  
  <p>I also found <a href="https://github.com/twbs/bootstrap/issues/21985" rel="noreferrer">this</a> page on GitHub but was not able to make any of the answers there work for me either. </p>