有没有办法将FontAwesome图标渲染为背景？

例如，我有一个div，以及它内部的一些文字内容，如：有没有办法将FontAwesome图标渲染为背景？

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu sapien 
    sed massa placerat rutrum. In tristique purus eget porta pharetra.</div>

现在我想从FontAwesome图标添加到背景中，就像这样：

enter image description here

请注意，我想让div“裁剪”一下这个图标，但我没有做到。因为当图标显示为块时，您不能通过使用overflow: hidden对其进行裁剪。

有谁知道如何达到这个效果？

来源

2013-07-07 trVoldemort

你错过了红色的手绘圆圈=（。 – BLaZuRE

你可以使用相对和绝对位置来做到这一点。

这里是一个粗略的例子，让你开始：http://jsfiddle.net/n57uf/1/

<div class="parent"> 
    <i class="icon-star-empty icon-4x child"></i> 
    <p class="content">Lorum ipsum lorum ipsum etc tect</p> 
<div> 

.parent { 
    position: relative; 
    border:1px solid black; 
    height: 200px; 
    width: 200px; 
    overflow: hidden; 
} 

.child { 
    position: absolute; 
    top: -15px; 
    left: -20px; 
} 

.content { 
    padding: 10px; 
    font-size: 16pt; 
}

来源

2013-07-07 02:58:22 Jason

请注意，你仍然需要漂浮两个孩子才能使它们重叠正确。我使用float而不是'position：absolute'的原因是我的情况父'div'本身就是一个浮动对象，如果你使用绝对位置，那么'top'和'left'将引用一个更远程的父对象。 – trVoldemort

我想出了一个解决方案：

<div class="wrapper"> 
    <i class="icon-star"></icon> 
    <div>Lorem ipsum dolor sit amet ...</div> 
</div>

和浮动两个孩子到左侧，使他们产生消极利润率。

更新： Awww ...贾森击败了我。

来源

2013-07-07 03:01:55 trVoldemort

有没有办法将FontAwesome图标渲染为背景？

回答

相关问题