css - 有没有办法将 FontAwesome Icon 渲染为背景？

Question

例如，我有一个 div，里面有一些文本内容，如下所示：

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

现在我想将 FontAwesome 中的图标添加到背景中，如下所示：

请注意，我希望 div 稍微“裁剪”图标，但我没有做到。因为当图标显示为块时，您无法使用overflow: hidden.

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

Answer 1

您可以使用相对位置和绝对位置来执行此操作。

这是一个让您入门的粗略示例：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;
}

Answer 2

您可以在任何 div 中尝试以下代码。它不会干扰其他元素。

<i class="fa fa fa-microchip fa-10x" style="color: white;position: absolute;right: 10px;top: 10px;opacity: 0.3;"></i>

Answer 3

我想出了一个解决方案：

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

并将两个孩子浮动到左边，并将它们设置为负边距。

更新： Awww ...杰森打败了我。