ブートストラップカルーセルの矢印の色を変更してください

Question

私は明らかにここでは愚かに単純なものが欠けています。白い背景の画像があるので、ブートストラップのカルーセルの矢印を編集できるようにします。あまりにも多くの矢印の色を変更する（私はやったような背景ではない）。私はこの作品を願ってい

CSS

.carousel-control-prev-icon, .carousel-control-next-icon { 
    height: 100px; 
    width: 100px; 
    outline: black; 
    background-color: rgba(0, 0, 0, 0.3); 
    background-size: 100%, 100%; 
    border-radius: 50%; 
    border: 1px solid black; 
} 

カルーセルHTML

<div class = 'col-md-9'> 

    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> 

     <ol class="carousel-indicators"> 
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> 
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> 
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> 
     </ol> 

     <div class="carousel-inner" role="listbox"> 
      <div class="carousel-item active"> 
       <img class="d-block img-fluid" src="carousel/Bars%20and%20Dots.jpg" alt="First slide" class = 'img-responsive'> 
      </div> 

      <div class="carousel-item"> 
       <img class="d-block img-fluid" src="carousel/murial.jpg" alt="Second slide" class = 'img-responsive'> 
      </div> 

      <div class="carousel-item"> 
       <img class="d-block img-fluid" src="carousel/Upper%20Partialism%20album%20covers004white.jpg" alt="Third slide" class = 'img-responsive'> 
      </div> 
     </div> 

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

    </div> 

</div> 

Answer 1

、歓声。ブートストラップ-3 1が使用できるため

.carousel-control-prev-icon, 
 
.carousel-control-next-icon { 
 
    height: 100px; 
 
    width: 100px; 
 
    outline: black; 
 
    background-size: 100%, 100%; 
 
    border-radius: 50%; 
 
    border: 1px solid black; 
 
    background-image: none; 
 
} 
 

 
.carousel-control-next-icon:after 
 
{ 
 
    content: '>'; 
 
    font-size: 55px; 
 
    color: red; 
 
} 
 

 
.carousel-control-prev-icon:after { 
 
    content: '<'; 
 
    font-size: 55px; 
 
    color: red; 
 
}

Answer 2

：

.carousel-control span.glyphicon { 
    color: red; 
} 

Answer 3

私はこれは古い記事ですけど、それは私を助けました。あなたが望む任意の16進値に終わりfill='%23fff' FFFを変更

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

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

：私はまた、ブートストラップV4のために、あなたもこのようなコントロールをオーバーライドすることにより、矢印の色を変えることができることを発見しました。たとえば、

fill='%23000'（黒）、fill='%23ff0000'（赤）などです。ちょうどメモ、私は重要な宣言なしでこれをテストしていません。