Html 如何将背景图像添加到字体图标？

我想把图标的颜色做成一个图像。因此，它不是紫色或其他东西，而是图像。我希望这是有道理的

我有以下代码：

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

但这只是将图标周围的区域更改为该图像，而不是内部

这是整个页面，我试图修改的图标是咖啡杯：

---

谢谢

您可以使用

背景剪辑

和

文本填充颜色

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

---

正如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>

；

您只需要在SVG中包含图标字符

在中，只需替换

.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

---

编辑： 如果您想为魔杖使用相同的背景（如下面的评论所述），您可以使用此选择器：

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

---

你也可以看看混合模式。（或answser底部的代码片段）

对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）：

---

如果背景为纯色，则可以使用反转的SVG图标（其中填充路径为空白，主图标为剪切/透明）：

html，正文{
填充：0；
保证金：0；
身高：100%；
}
身体{
背景：#ede1e9；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
马斯基孔先生{
位置：相对位置；
背景：url（'http://i.giphy.com/l2QZVskdU1QXM3I1a.gif“）无重复中心；
背景尺寸：封面；
}
maskicon先生{
显示：块；
高度：自动；
宽度：自动；
}
.maskicon svg路径{fill:#ede1e9；}
.maskicon.coffee svg{高度：45vh；}

---

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

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

---

可能的复制可以创建图像遮罩，但这只在背景为纯色时有效，如果您同意，我可以写一个答案。@Aziz yep go aheadhm，那么我还有其他方法可以在其他浏览器中使用吗？也许通过字体以外的其他方式谢谢，这太棒了！它只适用于静态图像，对吗？我相信不管它是静态图像还是gif，我只是在写一个类似的演示，但使用的是SVG路径+1用于使用文本元素。很好，这很有效，但是我想把相同的背景应用到另一个图标上（即顶部的魔杖）。我用“.wand:以前”吗？我试过了，但没用。@l-emi是的，如果你想要独特的背景，否则你可以用一个更通用的选择器将相同的

：：before

伪元素应用到你想要的所有图标。@l-emi:如果你想让它也在魔杖上工作，你可以使用选择器

。咖啡：before，.fa魔术：before

。

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

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