如何使用 HTML 和 CSS 在我的网站上显示社交图标？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15645634/
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
How can I display social icons on my website with HTML and CSS?
提问by user1420042
I am desperately trying to add some icons to my website but can't get them appear properly. What I want is just a container that contains images and display them in line. Then I would want to add some padding to that container and in between the images and that's it.
我拼命地尝试向我的网站添加一些图标，但无法让它们正确显示。我想要的只是一个包含图像并在线显示它们的容器。然后我想在该容器和图像之间添加一些填充，就是这样。
See here my approach. If anyone can help me out and correct my code so that it actually works, I would be more than happy.
在这里看到我的方法。如果有人可以帮助我并更正我的代码以使其实际工作，我会非常高兴。
In my HTML file:
在我的 HTML 文件中：
<div class="icons">
<div class="email"><a href="mailto:[email protected]" title="email"></a></div>
<div class="twitter"><a href="http://www.twitter.com" title="twitter">twitter</a>
</div>
In my CSS:
在我的 CSS 中：
.icons {
margin-left:30px;
}
.icons .email { background: url(../images/social/email.png) left top no-repeat; }
.icons .twitter { background: url(../images/social/twitter.png) left top no-repeat; }
NOTE: This code did not work for me.
注意：此代码对我不起作用。
回答by Kris Hollenbeck
I would create an image sprite for my icons. And then for the markup I would use a list and set the icon images as background images to their respective anchor tags... Something like this...
我会为我的图标创建一个图像精灵。然后对于标记，我将使用一个列表并将图标图像设置为它们各自的锚标记的背景图像......像这样......
HTML
HTML
<ul>
<li><a href="" class="icon facebook">Facebook</a></li>
<li><a href="" class="icon twitter">Twitter</a></li>
<li><a href="" class="icon googleplus">Google Plus</a></li>
</ul>
CSS
CSS
ul li {
float:left;
display:block;
}
.icon {
width:25px;
height:25px;
display:block;
text-indent:-9999px;
background-image:url(http://tridentdesign.com/wp-content/uploads/2012/12/gemicon.jpg);
background-repeat:no-repeat;
}
.facebook {
background-position:-140px -115px;
}
.twitter {
background-position:-185px -115px;
}
.googleplus {
background-position:-140px -265px;
}
HERE IS A FIDDLE TO DEMONSTRATE:
这是一个演示的小提琴：
Edit:I updated my css to match my fiddle.
编辑：我更新了我的 css 以匹配我的小提琴。
回答by VenomVendor
When you are adding an image in CSS you should add atleast Heightor width, it's good to add both, you can ignore(not necessarily) when you are adding images using imgtag.
当您在 CSS 中添加图像时，您应该至少添加Height或width，最好同时添加两者，当您使用img标签添加图像时，您可以忽略（不一定）。
To get in inline, as you are using div, add float:leftto .iconsclass
要进入内联，正如您正在使用的那样div，请添加float:left到.icons课程中
.icons {
margin-left:30px;
float:left;
width:50px;
height:50px;
}
You can also use the answer by Kris Hollenbeck, in that case you have to rewrite you HTML code too, which is highly preferred.
您也可以使用答案 by Kris Hollenbeck，在这种情况下，您也必须重写 HTML 代码，这是非常受欢迎的。
回答by mohssine ait
this is social widget demo http://www.tech-fans.com/p/socialbox.html
这是社交小部件演示http://www.tech-fans.com/p/socialbox.html
you can get it from here http://www.tech-fans.com/2013/03/socialbox.html
