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

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);"></text>
</svg>
You just need to include icon character in SVG
Demo fiddle

Answer 3

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.

Answer 4

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>

Answer 5

In your Codepen demo, just replace...
.coffee:before {
background: url("https://www.dropbox.com/s/czz3m5ieucxwbrl/stars.gif?dl=1");
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
... with...
.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;
}
Then, https://www.dropbox.com/s/xal8sws9h4qy06l/tumblr_n6hoofK5GW1r0hv8uo1_500.gif?dl=1 will be the background image of your icon.
The problem with the code in your question, is that you were using selector .coffee where you should have been using selector .coffee:before.
Edit :
If you want to use the same background for the wand (as mentioned in the comments below), you could use eg. this selector :
.coffee:before, .fa-magic:before {
background: url("https://www.dropbox.com/s/eg3v313y3fuha9b/ezgif.com-crop.gif?dl=1");
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

Answer 6

add a search icon using FontAwesome icon. searchbox is the div or any tag class name.
.searchbox:before {
position:absolute;
font: normal normal normal 14px/1 FontAwesome;
top: 17px;
left: 20px;
content: "\f002";
}