skip to Main Content

I used the icon from noun project.I need to change the color of the background and it’s color also.(change the background color to ‘black’ and change the image color to white. Is there any css there. or need to photoshop
i have the image in two format .svg and .png

icon location: http://thenounproject.com/term/meditation/29971/

coded like:

<img src="/assets/new_home/images/short_desc_icon_yoga.png" height="25px;" width="25px">                    <hr/>

2

Answers


  1. The easiest way to do this is to wrap the img element in another, for example a span:

    <span class="imgWrap">
    <img src="/assets/new_home/images/short_desc_icon_yoga.png" height="25px;" width="25px">
    </span>
    

    And add CSS:

    .imgWrap {
    display: inline-block;
    border: 1px solid #000;
    }
    
    .imgWrap:hover {
    background-color: #000;
    }
    
    Login or Signup to reply.
  2. CSS3 has a new filter attribute which will only work in webkit browsers

    img {
         background: #FFF;
         -webkit-filter: invert(100%);  
    }
    

    It flip the colors.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search