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!

Solution 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

Solution 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

Solution 3

You may also take a look at mix-blend-mode . http://codepen.io/gc-nomade/pen/eZQdEg (or snippet at the bottom of answser)

https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

Modification to your CSS :

.coffee {
  position:relative;/* to bring it on top */
  mix-blend-mode:screen;/* we will blend from black and white colors */
  color:black;/* this color will blend */
  box-shadow: inset 0 0 0 100px white; /* this will be the mask color */
}
.infobox {/* #infobox should be used only once, so i use a class */
  position:relative;/* to position the child */
}
.infobox:before{/* child or pseudo */
  content:'';
  /* slide it under the .coffebox */
  left:50%;
  margin-left:-70px;
  height:140px;
  width:140px;
  position:absolute;
  /* image to blend with */ 
  background: url("https://www.dropbox.com/s/czz3m5ieucxwbrl/stars.gif?dl=1");
}

modification to your html (where you use unproperly the ID too many times):

<div class="col-md-4 infobox " id="infobox" style="font-size: 28px;">
  <span class="fa fa-coffee fa-5x coffee" aria-hidden="true"></span>
</div>

.coffee {
  position: relative;
  mix-blend-mode: screen;
  color: black;
  box-shadow: inset 0 0 0 100px white;
}
.infobox {
  position: relative;
}
.infobox:before {
  content: '';
  height: 140px;
  width: 150px;
  position: absolute;
  background: url("https://www.dropbox.com/s/czz3m5ieucxwbrl/stars.gif?dl=1"),
  /* see gradient  while image loads*/
  linear-gradient(45deg, darkblue, white, darkblue, white, darkblue, white, darkblue, white);
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" />
<div class="col-md-4 infobox " id="infobox" style="font-size: 28px;">
  <span class="fa fa-coffee fa-5x coffee" aria-hidden="true"></span>
</div>

Solution 4

If your background is a solid color you could use an inverted SVG icon (where the filled path is the white-space and the main icons are cut/transparent):

html, body {
  padding: 0;
  margin: 0;
  height: 100%;
}

body {
  background: #ede1e9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.maskicon {
  position: relative;
  background: url('http://i.giphy.com/l2QZVskdU1QXM3I1a.gif') no-repeat center;
  background-size: cover;
}

.maskicon svg {
  display: block;
  height: auto;
  width: auto;
}

.maskicon svg path { fill: #ede1e9; }

.maskicon.coffee svg { height: 45vh; }

<div class="maskicon coffee">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="782 -846 1856 1792"><path d="M2254-398h-64v384h64c53.3 0 98.7-18.7 136-56s56-82.7 56-136-18.7-98.7-56-136-82.7-56-136-56z"/><path d="M782-846V562h1792c0 70.7-25 131-75 181s-110.3 75-181 75H1038c-70.7 0-131-25-181-75s-75-110.3-75-181v384h1870.9V-846H782zM2525.5 65.5c-75 75-165.5 112.5-271.5 112.5h-64v32c0 61.3-22 114-66 158s-96.7 66-158 66h-704c-61.3 0-114-22-158-66s-66-96.7-66-158v-736c0-17.3 6.3-32.3 19-45 12.7-12.7 27.7-19 45-19h1152c106 0 196.5 37.5 271.5 112.5S2638-312 2638-206 2600.5-9.5 2525.5 65.5z"/></svg>
</div>

jsFiddle: https://jsfiddle.net/azizn/mp7fo9ah/

Having the SVG inside the HTML allows you to easily control its fill color to match the background. You could go further with this and have any HTML content as the background (like text or even video) if you make the SVG element absolutely positioned with a higher z-index.

This requires more maintenance but is compatible with most browsers.

View more solutions

Comments

[nonono]

Hmm, is there any other way I can do this then which would work in other browsers? Maybe through something other than font awesome

[nonono]

Thanks, this is great! It only works with still images though, right?

[Bogdan Kuštan]

I believe it doesn't matter if its still image or gif: jsfiddle.net/xd6gny56/1

[Turnip]

I was just writing a demo similar to this but using an SVG path. +1 for using a text element. Very good

[nonono]

This worked, but say I want to apply the same background to another icon (i.e the wand at the top). Do I use ".wand:before"? I tried but it didn't work.

[Aziz]

@l-emi yes, if you want unique backgrounds, otherwise you could just apply the same ::before pseudo element to all the icons you want with a more general selector.

[John Slegers]

@l-emi : If you want it to work on the wand as well, you could use eg. selector .coffee:before, .fa-magic:before.