0

In my application I have a custom icon with black fill and now my requirement is to change the fill color to white and and border of the smiley will be black. And the smiley icon is given below

enter image description here

and my code is

<div>
<i class="icon icon-smiley-face-2"></i>
</div>

Now I want the above smiley face as white filling background and border of the smiley would ne black. Can anyone help me regarding the same

user93
  • 39
  • 1
  • 4

3 Answers3

0

See if this works or add a custom class on the i tag. If it is not working add an !important like below (only if it doesn't work without it)

.icon-smiley-face-2{
    stroke: #000000 !important; 
    fill: #ffffff !important;
  }
Shiju Nambiar
  • 161
  • 9
0

You can do that by simple CSS

.icon-smiley-face-2{
    color: #fff; 
    border:1px solid #000;
  }
Arrow
  • 532
  • 5
  • 18
  • In my smiley icon see the above the eyes are in white so if we change the color to white entire icon will be turned to white(no icon will be shown) – user93 Feb 01 '22 at 05:51
0

Check if it works. since it's your custom icon not sure how it's interact.

.icon-smiley-face-2{
   text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
   color: white;
}

Reference - stack ref for answer

Saikat Roy
  • 502
  • 8
  • 20
  • thank you it is working fine but small thing is the eyes in the smiley icons are in like a circle but I need it as filled dot instead of round circle can you able to make it? – user93 Feb 01 '22 at 06:58
  • may be that's because of the design of your icon. – Saikat Roy Feb 01 '22 at 07:18
  • Ok, by using the above text shadow or some style can we able to fill the eyes color ? – user93 Feb 01 '22 at 07:33
  • I don't think so. since we aren't able to select the path of particular that part of the icon. If you can inspect thoroughly and select those path then it'll be possible. – Saikat Roy Feb 01 '22 at 07:36