CODEWITHSUNDEEP
htmlcssiconsbackground-imagefont-awesome
nonono
nonono

Reputation: 601

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

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!

Upvotes: 4

Views: 12102

Answers (6)

gem007bd
gem007bd

Reputation: 1165

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";
}

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105853

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>

Upvotes: 1

John Slegers
John Slegers

Reputation: 47081

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;
}

Upvotes: 0

Aziz
Aziz

Reputation: 7783

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):

inverted SVG icon

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.

Upvotes: 1

Bogdan Kuštan
Bogdan Kuštan

Reputation: 5577

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

Upvotes: 3

Turnip
Turnip

Reputation: 36632

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

Upvotes: 4

Related Questions