Question

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

这就是我的代码的样子

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

我已经创建了一个jsfiddle来向您展示演示。 Click here to view it

如您所见，该按钮现在同时具有图标字体（即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

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

<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

您可以使用以下内容：

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

或者在:before选择器中设置背景，就像使用元素一样。

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

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

4 个答案: