Search code examples
csssvgdata-uri

Data URI: Changing color & defining content area

I found some icons on Flaticon.com to use them in the navigation menu of my blog. In this case I wanted to replace the text "Home" with a house icon using the Base64 code.

This is the current code that was used on my site:

.menu-item-36 {
  content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNC…ToDCG0DxpgvOsX4GsAgGyBKX8AAAAASUVORK5CYII5467651096249186f76b4680bd54615d');
  margin-left: 10px;
  height: 40px;
}

I changed background-image to content in order to hide the original text 'Home' and replace it with the icon.

Now the problem: When I use the code above, the icon has a black color. I would like to use a white color instead. When I set the class to color: #fff; or fill: #fff; it doesn't work.

enter image description here

How can I this issue?

Solution

  • To hide the text, you should not change the background css property to content. I don't know iff you should even use content for anything else then the ::before and ::after psuedo elements.

    But for your questions:

    To hide text, you should use one of the possibilities given in this answer: https://stackoverflow.com/a/471538/2012433

    To make your image white, there is a hacky solution, namely using this css:

    -webkit-filter: invert(100%);
        filter: invert(100%);

    But better would be to download the image and edit it to white. Then get the base64 code at for example http://www.base64-image.de/

    Finally when you set that image as background-image, the following css will fit it nicely in your menu:

    background-size: contain;
background-position: center;