css - background image instead of icon font

Question

As of now my button uses icon font. I would like to remove icon font, use image instead.

This is how my code looks like

.zocial::before {
content: "";
/* some code goes here */
}
.zocial.plus::before {
content: "p";
}

I have created a jsfiddle to show you demo. Click here to view it

As you can see, the button now has both icon font (which is p) and search icon.

Now I would like to remove that "p" character and move the search icon there.

I would appreciate your help very much.

Thanks

Answer 1

Give this a shot.

.zocial.plus::before {
    content: "\0000a0";
    background: url("http://twitter.github.com/bootstrap/assets/img/glyphicons-halflings-white.png") -48px 8px no-repeat;
}

here is the fiddle: http://jsfiddle.net/VJsHb/

Answer 2

Instead of

content:"p"

You can use

content: url("http://twitter.github.com/bootstrap/assets/img/glyphicons-halflings-white.png");

With the correct image, of course.

Regards

Answer 3

Just a sample of what I've used in a list. Try this, fit into your solution:

<div class="Info">
    <ul>
    <li>Text here</li>
    <li>Text here</li>
    <li>Text here</li>
    <li>Text here</li>
    </ul>
</div>

.Info ul li
{
padding-bottom:10px;
list-style-type:none; /* Switch the list bullet off altogether. */
background-image:url("images/yourImage.png"); /* The replacement bullet image */
background-position:0px 2px; /* Place bullet 0px from left and 4px from top */
background-repeat:no-repeat; /* Stops bullet tiling, important */
padding-left:22px; /* separation from li txt and bullet */

}

Answer 4

You could use something like this:

content: url("url/to/image.png");

Or make a background in your :before selector as you do with the element.

.zocial.plus::before {
    background-image: url("url/to/image.png");
}