[英]How to add a background image to a font awesome icon?
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! 谢谢!
You could use background-clip
and text-fill-color
to achieve this in webkit browsers though it won't work in other browsers unfortunately: 您可以使用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;
}
As mentioned by Turnip there is -webkit filter for that. 正如Turnip所提到的那样,有-webkit过滤器。 However it is more convenient to use SVG: 但是使用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);"></text>
</svg>
You just need to include icon character in SVG 您只需要在SVG中包含图标字符
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>
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. 将SVG
放在HTML
可以让您轻松控制其fill
颜色以匹配背景。 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
. 如果你使用更高的z-index
绝对定位SVG
元素,你可以进一步使用它并将任何HTML
内容作为背景(如文本甚至视频)。
This requires more maintenance but is compatible with most browsers. 这需要更多维护,但与大多数浏览器兼容。
In your Codepen demo , just replace... 在您的Codepen演示中 ,只需替换...
.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
. 你问题中代码的问题在于你使用了选择器.coffee
,你应该使用选择器.coffee:before
。
If you want to use the same background for the wand (as mentioned in the comments below), you could use eg. 如果你想对魔杖使用相同的背景(如下面的评论中所述),你可以使用例如。 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;
}
add a search icon using FontAwesome icon. 使用FontAwesome图标添加搜索图标。 searchbox is the div or any tag class name. searchbox是div或任何标记类名。
.searchbox:before {
position:absolute;
font: normal normal normal 14px/1 FontAwesome;
top: 17px;
left: 20px;
content: "\f002";
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.