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.

我在Flaticon.com上找到了一些图标，可以在我博客的导航菜单中使用它们。在这种情况下，我想使用Base64代码将文本“Home”替换为房屋图标。

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.

现在问题是：当我使用上面的代码时，图标有黑色。我想用白色代替。当我将类设置为颜色时：#fff;或填写：#fff;它不起作用。

How can I this issue?

我怎么能这个问题？

1 个解决方案

#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.

要隐藏文本，您不应将后台css属性更改为内容。我不知道你是否应该使用内容除了之前的::之前和::之后的psuedo元素。

But for your questions:

但是对于你的问题：

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

要隐藏文本，您应该使用此答案中给出的一种可能性：https：//*.com/a/471538/2012433

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

为了使你的图像变白，有一个hacky解决方案，即使用这个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/

但最好是下载图像并将其编辑为白色。然后获取base64代码，例如http://www.base64-image.de/

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

最后，当您将该图像设置为背景图像时，以下css将很好地适合您的菜单：

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