Html css - 背景图像而不是图标字体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14467733/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css - background image instead of icon font
提问by Giri
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
我创建了一个 jsfiddle 来向您展示演示。点这里观看
As you can see, the button now has both icon font (which is p) and search icon.
如您所见，该按钮现在同时具有图标字体（即 p）和搜索图标。
Now I would like to remove that "p" character and move the search icon there.
现在我想删除那个“p”字符并将搜索图标移到那里。
I would appreciate your help very much.
我非常感谢您的帮助。
Thanks
谢谢
回答by Eric Goncalves
Give this a shot.
试一试。
.zocial.plus::before {
content: "content:"p"
00a0";
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/
这是小提琴：http: //jsfiddle.net/VJsHb/
回答by Jair Reina
Instead of
代替
content: url("http://twitter.github.com/bootstrap/assets/img/glyphicons-halflings-white.png");
You can use
您可以使用
<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 */
}
With the correct image, of course.
当然，使用正确的图像。
Regards
问候
回答by tahdhaze09
Just a sample of what I've used in a list. Try this, fit into your solution:
只是我在列表中使用的示例。试试这个，适合你的解决方案：
content: url("url/to/image.png");
回答by pzin
You could use something like this:
你可以使用这样的东西：
.zocial.plus::before {
background-image: url("url/to/image.png");
}
Or make a background in your :beforeselector as you do with the element.
或者:before像处理元素一样在选择器中制作背景。
