How to remove the fill color(black) of smiley icon and change it to white-CodePudding

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

and my code is

<div>
<i ></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

CodePudding user response：

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;
  }

CodePudding user response：

You can do that by simple CSS

.icon-smiley-face-2{
    color: #fff; 
    border:1px solid #000;
  }

CodePudding user response：

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