如何添加背景图像到字体的可怕图标?

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

这是整个页面，我要修改的图标是咖啡杯:http://codepen.io/l-emi/pen/QNZevb

Thanks!

谢谢!

6 个解决方案

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

在webkit浏览器中，你可以使用背景剪辑和文本填充色来实现这一点，但不幸的是，它在其他浏览器中无法工作:

.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

例子

#2

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

如Turnip所提到的，有-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>

You just need to include icon character in SVG

只需在SVG中包含图标字符

Demo fiddle

演示小提琴

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

如果你的背景是纯色，你可以使用一个倒置的SVG图标(填充路径为空白，主图标为剪切/透明):

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/

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.

在HTML中包含SVG，可以方便地控制填充颜色以匹配背景。如果要使SVG元素完全定位于更高的z索引，则可以进一步使用它，并将任何HTML内容作为背景(如文本甚至视频)。

This requires more maintenance but is compatible with most browsers.

这需要更多的维护，但与大多数浏览器兼容。

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

你也可以看看混合型错误模式。http://codepen。io/gc-nomade/pen/eZQdEg(或答题者下方的代码片段)

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

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

Modification to your CSS :

修改你的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):

修改您的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>

#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.

然后,https://www.dropbox.com/s/xal8sws9h4qy06l/tumblr_n6hoofK5GW1r0hv8uo1_500.gif?dl=1将是您的图标的背景图像。

The problem with the code in your question, is that you were using selector .coffee where you should have been using selector .coffee:before.

问题中的代码的问题是，您使用的是selector .coffee，您应该使用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 :

如果您想为wand使用相同的背景(如下面的注释中提到)，您可以使用eg。这个选择器:

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

#6

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

使用FontAwesome图标添加一个搜索图标。searchbox是div或任何标记类名。

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