Modifying the color of the SVG background image in Bootstrap 4 carousel

I am currently working on a BS 4 carousel with next/prev controls that are functioning well. However, I have a light background and would like to modify the color of the controls which are currently white.

Here is the HTML code:

<div id="carouselQuotes" class="carousel slide quotecaru" data-ride="carousel">
<ol class="carousel-indicators">
    <li data-target="#carouselQuotes" data-slide-to="0" class="active"></li>
    <li data-target="#carouselQuotes" data-slide-to="1"></li>
    <li data-target="#carouselQuotes" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
    ... carousel items ...
</div>
<a class="carousel-control-prev" href="#carouselQuotes" 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="#carouselQuotes" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
</a>

Changing the color of the indicators was a simple process as it just required adjusting the background color. However, altering the background-color or color property for the prev/next controls did not change the color of the control icon itself.

I discovered that the icons are being set through background-image SVG, with a specific fill color defined:

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

I attempted to change the fill color using the following:

.carousel-control-prev-icon, .carousel-control-next-icon {
    fill: #000;
}
.carousel-control-prev-icon, .carousel-control-next-icon {
    fill: '#000';
}
.carousel-control-prev-icon, .carousel-control-next-icon {
    fill: '%23000';
}

Is there a way to modify the color of the icon without overriding the entire background-image property?

Thank you

csssvgbackground-imagebootstrap-4twitter-bootstrap-4

Answer №1

When it comes to styling the contents of an SVG background image, CSS rules won't be of much help. The image is processed and converted into a bitmap image as it is being decoded.

To make any changes, you will have to directly modify the SVG itself. Simply replace the 

fill='%23fff'

with

fill='%23000'

or any other color you desire. Remember, "%23" represents the "#" symbol and should be URL-encoded when used in a Data URI like this.

div {
  background-color: black;
}

button {
  width: 24px;
  height: 24px;
  border: none;
  background-color: transparent;
}

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


div.inverted {
  background-color: white;
}

.inverted .carousel-control-prev-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' 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");
}
<div>
  <button class="carousel-control-prev-icon"></button>
</div>

<div class="inverted">
  <button class="carousel-control-prev-icon"></button>
</div>

Answer №2

Adjusting the color of an SVG background image

.custom-carousel-control-prev-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%2300ff00' 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");
    }

Answer №3

To implement bootstrap 5, the following steps need to be taken. Let's assume you have an SVG with default settings.

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" fill="#00ff00" class="bi bi-check-circle" viewBox="0 0 16 16">
<svg>

To change the fill color, simply adjust the code as follows: fill="#00ff00" for green fill="#000000" for black, and so on. You can find hex codes on the Internet for various colors.

Answer №4

This is how I accomplished it:

  • I obtained a hexadecmial code from Google, for instance #A569BD
  • Next, I utilized an online URL encoder
  • The URL encoder converted the hex code #A569BD to %23A569BD
  • I then incorporated the encoded code in an SVG to fill elements in this manner

https://i.sstatic.net/xqbNP.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to center my items vertically in a material-UI Grid row?

Struggling to vertically align three items in a row using Material UI's Grid component. Despite setting "justifyContent: 'center'," it only horizontally centers the items. Here are my styles: const styles = (theme) => ({ root: { te ...

cssreactjsgridmaterial-uivertical-alignment

Tips on aligning an entire text in R Markdown using the bookdown::gitbook function as the desired output

I've been looking for a way to justify the text in my gitbook, but haven't had any luck finding a solution. I've attempted: Adding "text-align: justified" to the CSS right after the YAML Header: <style> body { text-align: justify ...

htmlcssr-markdownbookdowngitbook

Persistent Footer while scrolling on Internet Explorer

Trying to achieve a consistent look across Chrome, IE(11), and FF for my responsive website has been a challenge. The main issue I'm facing in IE is that when the site's content extends beyond the viewport, the scrollbar fails to reach the end d ...

htmlcssinternet-explorer

The media query will only impact elements and classes within the index.html file, and will not apply to any other

As I strive to optimize my website for mobile devices, I am encountering an issue with my media queries. The classes don't seem to respond appropriately on any page other than the index.html, and I'm struggling to identify the root cause. Index. ...

htmlcssroutesmedia-queriesmeta-tags

Placement of BOX alongside each other

Whenever I try to align the green and orange boxes side by side, it doesn't seem to work properly. Even though 1000 divided by 2 equals 500 (by the way, I am new to HTML). I am struggling with understanding positions and sizes in HTML. Here is the HT ...

htmlcss

Modify the display of multiple divs within a main div

I am facing an issue with a parent div that contains multiple child divs. When there are many children, they all remain in a single row without adjusting into columns. Below is my current HTML: item1 item2 item3 ... <mat-card class="hove ...

htmlcssangularangular6position

Pager made the bold decision to transition from a horizontal layout to a vertical format

I've been feeling frustrated lately. After being sick for a while, my customer called to inform me that the gallery pager on their website is broken. Although I managed to fix most of it and restore the original style, I'm struggling to get it t ...

csswordpresspager

Alter div elements with jQuery based on the particular link that was selected

I'm struggling with updating a nav bar that has different divs based on the link clicked. <script> $(document).ready(function (){ $("#content").load("content/index_content.php"); $('a').click(function(){ $ ...

jqueryhtmlcss

What is the best way to contain my content within a bordered box?

As a beginner in HTML and CSS, I have successfully created a basic website with a simple menu at the top that includes links to different pages like "Home," "About," and "Contact." The website will mainly feature information and images, but I believe it wo ...

htmlcss

Harness the power of SVG on iOS with PocketSVG for a vast library of image assets

One of our team members is advocating for the use of SVGs through github.com/pocketsvg/PocketSVG, instead of traditional assets @1x @2x @3x. We possess a vast collection of image sets. I have two inquiries: 1) Will rendering hundreds of SVG data using Po ...

iossvguibezierpathvector-graphics

Switch the style sheets after the content

How can I create a toggle effect on the :after property, switching between + and - each time the link is clicked? I've attempted to achieve this using JavaScript, CSS, and HTML, but the code only changes + to - and doesn't switch back when the l ...

javascriptcss

Bootstrap does not support horizontal alignment of columns

I can't seem to get my columns to align horizontally in bootstrap. I want the image on the left and the text on the right, but they keep stacking vertically. Can someone help me with this? As far as I know, col-md-6 should divide the page into 2 colu ...

htmlcssbootstrap-4

The HTML element does not expand to fill the entire page

I recently encountered a problem with my website. Everything was functioning smoothly until I decided to add some in-page links to a large page. After adding the links, the background no longer stretched the entire length of the page. When scrolling down, ...

htmlcssbackground

Adjust the width of a class using CSS transitions when hovering

Is there a way to use pure CSS to adjust the widths of classes on hover? Although the transition is successfully changing the classes, class .b and .c are not impacting the width of classes that come before them. Ideally, I would like the previous class ( ...

htmlcsscss-transitions

Creating an AI adversary for a simple Tic Tac Toe game board: a step-by-step guide

Being new to programming, I recently completed a basic Tic Tac Toe gameboard successfully. However, as I progress to the next phase of my assignment which involves implementing an AI opponent, I encountered several challenges. As a novice in programming, ...

javascripthtmlcss

Center a span vertically inside a div as the text within the span grows to occupy the entire div

I am facing an issue with a table that has 25 td's. Each td contains specific elements as shown below: <td> <div> <span> text </span> </div> </td> Additionally, there is a script in place that adj ...

javascriptjquerycss

Open HTML Frameset in a new tab or window

I've been contemplating for the past week on how to address my issue using frameset. Situation: I have an html file for header, footer, menu, and content, each with its own background color. I implemented a frameset for enhanced design. The header ...

htmlcssframeset

What is the best way to implement a CSS Style specifically for a glyphicon icon when it is in keyboard focus?

I have a particular icon representing a checkbox that appears as a glyphicon-star. It is designed to display in yellow when focused on by the keyboard navigation. This feature is intended to help users easily identify their location on a page. However, an ...

javascripthtmlcss

What steps should be taken to ensure that the onmouseover and onmouseout settings function correctly?

The Problem Currently, I have a setup for an online store where the shopping cart can be viewed by hovering over a div in the navigation menu. In my previous prototype, the relationship between the shoppingTab div and the trolley div allowed the shopping ...

javascriptjqueryhtmlcss

Move the scroll bar away from the scrollable div and reposition it on a different part of the page using CSS

Is it possible to use CSS to position the scrollbar of a div that takes up the left half of my page with overflow-y: scroll to be where the page scrollbar would normally be (far right side of the page)? I've experimented with the ::-webkit-scrollbar ...

htmlcssscrollscrollbar