How to add a background image to a font awesome icon?

Question

I want to make the coloring of the icon an image. So instead of it being purple or something, it is the image. I hope that makes sense!

I have this code:

<span class="fa fa-coffee fa-5x coffee" aria-hidden="true"></span>

and the class:

.coffee {
background: url("https://www.dropbox.com/s/xal8sws9h4qy06l/tumblr_n6hoofK5GW1r0hv8uo1_500.gif?dl=1");
}

but this just changes the area around the icon to that image, not the inside.

Here's the whole page, the icon I'm trying to modify is the coffee cup: http://codepen.io/l-emi/pen/QNZevb

Thanks!

Answer 1

You could use background-clip and text-fill-color to achieve this in webkit browsers though it won't work in other browsers unfortunately:

.coffee:before {
  background: url("https://www.dropbox.com/s/xal8sws9h4qy06l/tumblr_n6hoofK5GW1r0hv8uo1_500.gif?dl=1");
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

EXAMPLE

Answer 2

As mentioned by Turnip there is -webkit filter for that. However it is more convenient to use SVG:

<svg>
  <pattern id="mypattern" patternUnits="userSpaceOnUse" width="750" height="800">
    <image width="750" height="800" xlink:href="https://placekitten.com/g/100/100"></image>
  </pattern>
  <text x="0" y="80" class="fa fa-5x"
      style="fill:url(#mypattern);">&#xf0f4;</text>
</svg>

You just need to include icon character in SVG

Demo fiddle