Geek Answers Handbook

How to add a background image to a font?

I want to make icon coloring an image. Therefore, instead of being purple or something, this is an image. Hope this makes sense!

I have this code:

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

and class:

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

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

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

Thank!

+4
source share
6 answers

You can use background-clipand text-fill-colorto achieve this in web browser browsers, although, unfortunately, it does not work in other browsers:

.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

+4
source

, -webkit. 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>

SVG

-

+3

mix-blend-mode. http://codepen.io/gc-nomade/pen/eZQdEg ( )

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

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

html ( ID ):

<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>
Hide result
+1

, SVG ( - , - /):

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>
Hide result

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

SVG HTML fill . HTML (, ), SVG z-index.

, .

+1

Codepen ...

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

... ...

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

https://www.dropbox.com/s/xal8sws9h4qy06l/tumblr_n6hoofK5GW1r0hv8uo1_500.gif?dl=1 .

, .coffee, .coffee:before.

:

If you want to use the same background for the stick (as indicated in the comments below), you can use, for example. 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;
}
0
source

add a search icon using the FontAwesome icon. searchbox is the name of a class div or any type.

.searchbox:before {
  position:absolute;
  font: normal normal normal 14px/1 FontAwesome;
  top: 17px;
  left: 20px;
  content: "\f002";
}
0
source

More articles:


All Articles