更改 Bootstraps 旋转木马中的箭头颜色

我显然错过了一些愚蠢的简单的东西。我有一个白色背景的图像，所以我想能够编辑的自举旋转木马上的箭头，使他们是可见的。这么多改变颜色的箭头(不像我做的背景)。

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>
211026 次浏览
小开
最佳答案

I hope this works, cheers. 

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

小开

for bootstrap-3 one can use:

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

I know this is an older post, but it helped me out. I've also found that for bootstrap v4 you can also change the arrow color by overriding the controls like this:

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

Where you change fill='%23fff' the fff at the end to any hexadecimal value that you want. For example:

fill='%23000' for black, fill='%23ff0000' for red and so on. Just a note, I haven't tested this without the !important declaration.

小开

If you are using bootstrap.min.css for carousel-

<a class="left carousel-control" href="#carouselExample" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carouselExample" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>

Open the bootstrap.min.css file and find the property "glyphicon-chevron-right" and add the property "color:red"

小开

You should use also: <span><i class="fa fa-angle-left" aria-hidden="true"></i></span> using fontawesome. You have to overwrite the original code. Do the following and you'll be free to customize on CSS:

<a class="carousel-control-prev" href="#carouselExampleIndicatorsTestim" role="button" data-slide="prev">
<span><i class="fa fa-angle-left" aria-hidden="true"></i></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicatorsTestim" role="button" data-slide="next">
<span><i class="fa fa-angle-right" aria-hidden="true"></i></span>
<span class="sr-only">Next</span>
</a>

The original code

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

Currently Bootstrap 4 uses a background-image with embbed SVG data info that include the color of the SVG shape. Something like:

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

Note the part about fill='%23fff' it fills the shape with a color, in this case #fff (white), for red simply replace with #f00

Finally, it is safe to include this (same change for next-icon):

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

In bootstrap 4 if you are just changing the colour of the controls you can use the sass variables, typically in custom.scss:

$carousel-control-color: #7b277d;

As highlighted in this github issue note: https://github.com/twbs/bootstrap/issues/21985#issuecomment-281402443

小开

a little example that works for me

    .carousel-control-prev,
.carousel-control-next{
height: 50px;
width: 50px;
outline: $color-white;
background-size: 100%, 100%;
border-radius: 50%;
border: 1px solid $color-white;
background-color: $color-white;
}


.carousel-control-prev-icon {
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23009be1' 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");
width: 30px;
height: 48px;
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23009be1' 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");
width: 30px;
height: 48px;
}
小开

If you just want to make them black in Bootstrap 4+.

.carousel-control-next,
.carousel-control-prev /*, .carousel-indicators */ {
filter: invert(100%);
}
小开

With Font Awesome icons:

<!-- Controls -->
<a class="carousel-control-prev" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="fa fa-chevron-left fa-lg" style="color:red;"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-example-generic" role="button" data-slide="next">
<span class="fa fa-chevron-right fa-lg" style="color:red;"></span>
<span class="sr-only">Next</span>
</a>
小开

I too had a similar problem, some images were very light and some dark, so the arrows didn't always show up clearly so I took a more simplistic approach.

In the modal-body section I just removed the following lines:

    <!-- Left and right controls -->
<a class="carousel-control-prev" href="#id" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#id" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>

and inserted the following into the modal-header section

    <!-- Left and right controls -->
<a  href="#gamespandp" data-slide="prev" class="btn btn-outline-secondary btn-sm">&#10094;</a>
<a  href="#gamespandp"  data-slide="next" class="btn btn-outline-secondary btn-sm">&#10095;</a>

The indicators can now be clearly seen, no adding extra icons or messing with style sheets, although you could style them however you wanted!

See this demo image:

[demo Image]

小开

To customize the colors for the carousel controls, captions, and indicators using Sass you can include these variables 

    $carousel-control-color:
$carousel-caption-color:
$carousel-indicator-active-bg:
小开

This worked for me:

.carousel-control-prev-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
}
      

.carousel-control-next-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
}

I changed the color in the url of the icon. Thats the original that is used in the bootstrap page but with this section in black:

"...fill='%23000'..."

小开

To change the color you should add the style to your css file and made a little change in fill attribute in svg code uses as background-image for classes .carousel-control-prev-icon and .carousel-control-next-icon

fill='%23fff' change only fff to color you need for example f00 for red. (it's possible to use 6letters hex also --> %23ff0000)

.carousel-control-pre-icon {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");}

for juniors: .carousel-container .carousel .carousel-control-next .carousel-control-next-icon

小开

Add .carousel-dark to the .carousel for darker controls, indicators, and captions.

Bootstrap 5 documentation

小开

To swap them for font awesome with pure CSS:

.carousel-control-prev-icon, .carousel-control-next-icon {
background-image: none;
}


.carousel-control-prev-icon:after, .carousel-control-next-icon:after {
content: "\f053";
font-family: 'Font Awesome 5 Free', sans-serif;
}


.carousel-control-next-icon:after {
content: "\f054";
}

提交答案