Change SVG color

Hi I am trying to change the color of my svg icon and Im not sure I am grabbing the right selectors/classes and an using the fill property if thats correct? http://54.172.86.136/

04%20PM

.elementor-heading-title a img {
	fill:red;
}

Hi there csosa,

find this…

http://54.172.86.136/wp-content/uploads/2019/05/User.svg

Open it in your text editor and change this…

<style type="text/css">
	.st0{fill:#333333;}
</style>

…to this…

<style type="text/css">
	.st0{fill:#f00;}
</style>

coothead

hmm this doesnt seem to work, i dont see that class

Perhaps, you should’ve taken rather more
time, and looked a little more carefully. :winky:

  1. Open this file…

http://54.172.86.136/wp-content/uploads/2019/05/User.svg

…in your text editor, and you will see this…

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#333333;}
</style>
<g id="User">
	<path id="Combined-Shape" class="st0" d="M16,15c-4.7,0-11.3,0-16,0c0-0.2,0-1.4,0-1.7c0-0.6,0.1-1.1,0.4-1.6s1.7-1.1,2.3-1.4
		c0.8-0.4,1.7-0.7,2.5-1C5.6,9.2,5.8,9.1,6.1,9c0.3-0.1,0.5-0.5,0.5-0.9c0,0,0-0.1-0.1-0.1c-0.7-0.9-1-2-1.2-3.1
		c-0.1-0.7-0.1-1.4,0-2.1c0.2-1,0.9-1.6,1.9-1.7C7.8,1,8.4,1,8.9,1.1C10,1.3,10.6,2,10.7,3c0.2,1.2,0,2.4-0.5,3.5
		C10.1,7,9.8,7.4,9.6,7.9c0,0,0,0.1-0.1,0.1C9.4,8.3,9.6,8.8,9.9,9c0.4,0.2,0.8,0.3,1.2,0.4c0.8,0.3,2,0.7,2.8,1
		c0.8,0.4,1.7,1,1.9,1.8C15.9,12.8,16,14.3,16,15L16,15z"/>
</g>
</svg>

  1. On lines 5, 6 and 7 you will find this…
<style type="text/css">
	.st0{fill:#333333;}
</style>
  1. Change it to…
<style type="text/css">
	.st0{fill:#f00;}
</style>

  1. Click “File”
  2. Click “Save”
  3. Have a beverage. :winky:
  4. Job done. :biggrin:

If that is too difficult, then download and open the attachment…

User.zip (684 Bytes)

…which contains the amended “User.svg” file.

Replace your existing file with this one.

coothead

1 Like

Im trying to put this in my css to test but its not changing

.st0{fill:#red;}

:banghead:

I am afraid that Hell will freeze over before it does. :unhappy:

Please, carefully read the precise instructions
which were given to you in post #4.

You will then understand that there are two options which will resolve
your dilemma.

Use the one which is most suitable to your situation. :biggrin:

coothead

ok thanks coo coo head

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.