title: Data URI: Changing color & defining content area
body: <p>I found <a href="http://www.flaticon.com/free-icon/home_720" rel="nofollow noreferrer">some icons</a> 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.</p>
  
  <p>This is the current code that was used on my site:</p>
  
  <pre><code>.menu-item-36 {
    content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNC…ToDCG0DxpgvOsX4GsAgGyBKX8AAAAASUVORK5CYII5467651096249186f76b4680bd54615d');
    margin-left: 10px;
    height: 40px;
  }
  </code></pre>
  
  <p>I changed <code>background-image</code> to <code>content</code> in order to hide the original text 'Home' and replace it with the icon.</p>
  
  <p>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 <code>color: #fff;</code> or <code>fill: #fff;</code> it doesn't work.</p>
  
  <p><img src="https://i.stack.imgur.com/i949S.png" alt="enter image description here"></p>
  
  <p>How can I this issue?</p>