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

Question

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

我有这个代码：

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

和班级：

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

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

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

谢谢！

Answer 1

您可以使用background-clip和text-fill-color在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;
}

例

Answer 2

正如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中包含图标字符

演示小提琴

Answer 3

您还可以查看混合混合模式。 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> 

Answer 4

如果您的背景是纯色，则可以使用反转的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/

将SVG放在HTML可以让您轻松控制其fill颜色以匹配背景。 如果你使用更高的z-index绝对定位SVG元素，你可以进一步使用它并将任何HTML内容作为背景（如文本甚至视频）。

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

Answer 5

在您的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 。

---

编辑：

如果你想对魔杖使用相同的背景（如下面的评论中所述），你可以使用例如。 这个选择器：

.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

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

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