How to CSS filter an element or all children of an element equally to White?

HTML & CSS
1

Please run the following code and you shall get a bar with a “contact us” button that includes an SVG icon and some adjacent text.

HTML

<aside class="sticky_global">
    <div class="general_contact">
    <div class="voip_wrapper">
      <a href="https://example.com/contact" class="voip_link">
        <img src="https://www.svgrepo.com/show/533286/phone-call-alt-1.svg" alt="voip_call_icon" class="voip_icon"></img>
        <!-- https://www.svgrepo.com/vectors/phone/ -->
        <span class="voip_text">Contact us</span>
      </a>
    </div>
  </div>
</aside>

CSS

.sticky_global {
	display: block;

	position: sticky;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2147483647;

	padding-top: 5px;
	padding-bottom: 5px;

	text-decoration: none;
	font-weight: bold;

	background: blue;
}

.voip_wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	
	padding-top: 10px;
	padding-bottom: 10px;
}

.voip_link {
	display: inline-block;
	transition: none !important;
	box-shadow: none !important;
	text-decoration: none !important;
	color: #000;
}

.voip_icon {
	display: inline;
	vertical-align: middle;

	width: 25px;
	height: 25px;
	max-width: 25px;
	max-height: 25px;

	margin-right: 5px;
}

.voip_text {
	display: inline;
	vertical-align: middle;
}

My question

The SVG icon and the text appear Black.
How to CSS filter an element or all children of an element (in this case both the SVG icon and its adjacent text) equally to White?

2

Step 1: Take the SVG out of its file.
Step 2: Remove the stroke from the Path element.
Step 3: CSS can now change the stroke by specifying exactly that: .voip_icon path { stroke: white; }

All children of an element would be *, but the path is a child of a child.

3

In case I don’t want to download and save and edit the SVG, is there any action to do only with CSS and/or JavaScript?

5

Additional considerations that ChatGPT didnt bother to put into the above post:

  • You’re referring to an external resource. Which means they can change the external resource. Or remove it. Or their server could be offline, leaving you with…no image.
  • It doesnt work so well when the SVG has a background, because your brightness 0 will wash the ENTIRE image out, and then paint it all white, leaving you with… a white box.
1 Like