Css 将背景图像添加到字体图标

我想添加一个字体很棒的图标图像。假设我的图标星是空的，想用一张照片来填充它的内部。可能吗？我已经尝试过了，但确实取得了进展。任何帮助都将不胜感激

[class^="icon-"]::before,
[class*=" icon-"]::before {
font-family: FontAwesome;
font-style: normal;
display: inline-block;
text-decoration: inherit;
}
.icon-star-empty:before {
content: "\f006";
}

.iconBackground:before {
font-size: 72px;
background: -webkit-gradient(linear, left top, left bottom, from(#f00), to(#333));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display initial;    
}    

---

在下面为每个请求添加了一个提琴。

我的想法只适用于WebKit，它依赖于

-WebKit背景剪辑：text

它还依赖于有一个坚实的版本的形状在讨论中，在这种情况下，有陪同

。图标星空已填充{
字体大小：150px；
位置：相对位置；
}
.图标星空已填充：之前{
内容：“\f005”；
颜色：透明；
背景：url(http://placekitten.com/300/300)不重复；
背景尺寸：封面；
-webkit背景剪辑：文本；
}
.图标星空已填充：之后{
内容：“\f006”；
颜色：透明；
背景：-webkit渐变（线性、左上、左下、从（#f00）到（#333））；
-webkit背景剪辑：文本；
位置：绝对位置；
排名：0；
左：0；
}

您应该更详细地说明您的案例，说明您尝试了什么等等。顺便问一下，您是否尝试在

i

元素中强制使用

背景图像

？试着做一个jsFiddle，让我们在飞行中玩你的想法。你对WebKit唯一的解决方案感兴趣吗？@GuilhermeOderdenge不，我没想到。我来试一试。@thirtydot目前我对任何有效的解决方案都感兴趣。：）如果你想玩小提琴，这里有一把：不客气。如果您需要支持其他浏览器，请使用SVG来代替。