2

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?

Otaku Kyon
  • 415
  • 1
  • 9
  • 19

1 Answers1

1

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;
Community
  • 1
  • 1
Wouter Raateland
  • 1,007
  • 8
  • 13
  • Well you are right. The problem is that the second link you posted does not support for converting base64 to svg.. and turning it back into a base64 code. I made some research and found this site: http://vectorpaint.yaks.co.nz/ you can upload a svg and change its color. Only problem is that I am unable to turning the svg into a base64 code... – Otaku Kyon May 11 '15 at 04:53
  • You can convert the svg to png format using this site: http://image.online-convert.com/convert-to-png and then convert it to base64 code, but I prefer to just use the svg image in most cases. – Wouter Raateland May 11 '15 at 15:39