html - css - 背景图像而不是图标字体

Question

截至目前，我的按钮使用图标字体。我想删除图标字体，改用图像。

这就是我的代码的样子

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

我创建了一个 jsfiddle 来向您展示演示。点这里观看

如您所见，该按钮现在具有图标字体（即 p）和搜索图标。

现在我想删除那个“p”字符并将搜索图标移到那里。

非常感谢您的帮助。

谢谢

Answer 1

试一试。

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

这是小提琴：http: //jsfiddle.net/VJsHb/

Answer 2

代替

content:"p"

您可以使用

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

当然，使用正确的图像。

问候

Answer 3

你可以使用这样的东西：

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

或者:before像处理元素一样在选择器中创建背景。

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

Answer 4

只是我在列表中使用的示例。试试这个，适合您的解决方案：

<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 */

}