有没有一种方法将FontAwesome图标呈现为背景？

Question

例如，我有一个 `

` 元素，并在其中放置一些文本内容，像这样：

<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来裁剪它。

有人知道如何实现此效果吗？

- xzhu

---

你遗漏了红色的手绘圆圈 =(。 - BLaZuRE

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;
}

- Jason

---

请注意，您仍然需要浮动两个子元素以使它们正确重叠。我使用浮动而不是 position: absolute 的原因是，在我的情况下，父级 div 本身就是一个浮动对象，如果使用绝对定位，则 top 和 left 将参考更远的父级。 - xzhu

Answer 2

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

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

- Arjun Shaw

Answer 3

我想出了一个解决方案：

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

将两个子元素都向左浮动，并将它们设置为负边距。

更新：哎呀... Jason 比我先发了。

- xzhu

---

格式错误的HTML </icon> 应该是 </i>。 - Rafael Herscovici