Html 更改 Bootstrap 4 Carousel 控件颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49391266/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change Bootstrap 4 Carousel Control Colors
提问by Ben Kramer
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.
我正在使用 Bootstrap 4.0 为 Carousel 使用白色背景，并想更改控件的颜色。似乎 bootstrap 现在使用 SVG 作为他们的轮播图标。这意味着直接更改属性不起作用。
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.
我目前也在网站上的其他元素中使用 Font Awesome，所以如果有一种方法可以使用 fa-V 形并对其进行格式化，并且它在调整大小和格式方面的行为仍然相同，这可能是一个有效的解决方案好。
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 herebut was not able to make sense of the answer provided there.
I also found thispage on GitHub but was not able to make any of the answers there work for me either.
我也在GitHub 上找到了这个页面，但也无法让那里的任何答案对我有用。
回答by WebDevBooster
There's no need for any unnecessary css hacks.
不需要任何不必要的 css hack。
If you want to modify any Bootstrap css (or the carousel control colors in particular), you can easily do that.
如果您想修改任何 Bootstrap css（或特别是轮播控件颜色），您可以轻松地做到这一点。
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 fffin the fill='%23fff'parts with the hex code of the desired color.
替换fff在fill='%23fff'与所希望的颜色的十六进制代码部分。
Here's a working code snippet where fill='%23fff'has been replaced with fill='%23f00'for red instead of white:
这是一个工作代码片段，其中fill='%23fff'已被替换fill='%23f00'为红色而不是白色：
<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>回答by Lintang Wisesa
Just insert your own icon inside the carousel-control-next& carousel-control-prevclass. For example, I want to change the prev & next icon with Font-Awesomeicons. I can do this:
只需在carousel-control-next&carousel-control-prev类中插入您自己的图标即可。例如，我想用Font-Awesome图标更改上一个和下一个图标。我可以做这个：
<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
希望它能解决你的问题
