有沒有辦法將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圖標渲染爲背景？

回答

相關問題