CODEWITHSUNDEEP
css
xzhu
xzhu

Reputation: 5755

Is there a way to render a FontAwesome Icon as the background?

For example, I have a div, and some text content inside of it, like this:

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

Now I want to add an icon from FontAwesome into the background, like this:

enter image description here

Notice that, I'd like the div to "crop" the icon a little bit, which I failed to do. Because when the icon is displayed as a block, you cannot crop it by using overflow: hidden.

Does anyone know how to achieve this effect?

Upvotes: 3

Views: 2166

Answers (3)

xzhu
xzhu

Reputation: 5755

I came up with a solution:

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

and float both children to the left, and set them to have negative margins.

Update: Awww ... Jason beat me to it.

Upvotes: 0

Arjun Shaw
Arjun Shaw

Reputation: 31

you can try the following code inside any div. It will not interfere with other elements.

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

Upvotes: 3

Jason
Jason

Reputation: 15931

You can do this using relative and absolute positions.

Here is a rough example to get you started: 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;
}

Upvotes: 4

Related Questions