logo标签列表

如何为Font Awesome图标添加背景图片？

htmlcssiconsbackground-imagefont-awesome
4

我希望将图标的着色变成一张图片。因此，它不再是紫色或其他颜色，而是一张图片。希望你能理解我的意思！

我有这段代码：

<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

谢谢！

可能是Font Awesome 背景颜色的重复问题。 - Pirate X
你可以创建图像遮罩，但这仅适用于背景是纯色的情况下，如果您可以接受这一点，我可以写一个答案。 - Aziz
@Aziz 好的，请继续。 - nonono
6个回答
4
您可以在Webkit浏览器中使用background-clip和text-fill-color来实现此功能，但不幸的是，在其他浏览器中无法实现这一点。
.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

哦，那还有其他的方法可以让其他浏览器也能运行吗？也许可以通过一些非字体awesome的方式。 - nonono
3

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

演示实例

谢谢，这很棒！但是它只能用于静态图像，对吧？ - nonono
我相信这并不重要，无论是静态图像还是gif：https://jsfiddle.net/xd6gny56/1/ - Bogdan Kuštan
我刚写了一个类似的演示，但是使用了SVG路径。使用文本元素加1。非常好。 - Turnip
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>

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

将 SVG 放在 HTML 中可以轻松控制其 fill 颜色以匹配背景。如果您将 SVG 元素绝对定位并设置更高的 z-index，则可以将任何 HTML 内容作为背景（例如文本甚至视频）。

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

1

你还可以查看 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>

0

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

.searchbox:before {
  position:absolute;
  font: normal normal normal 14px/1 FontAwesome;
  top: 17px;
  left: 20px;
  content: "\f002";
}
0
在您的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;
}
这个方法是可行的，但是如果我想将同样的背景应用到另一个图标上（比如顶部的魔杖），我该怎么做呢？我使用“.wand:before”吗？我尝试过了，但是没有成功。 - nonono
@l-emi 是的，如果你想要独特的背景，否则你可以将相同的 ::before 伪元素应用于你想要的所有图标，并使用更通用的选择器。 - Aziz
1
如果你想在魔杖上也起作用，你可以使用选择器 .coffee:before, .fa-magic:before。 - John Slegers
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接