如何使用HTML和CSS在我的网站上显示社交图标？ [英] How can I display social icons on my website with HTML and CSS?

问题描述

我拼命地尝试添加一些图标到我的网站，但不能让它们正常显示。我想要的只是一个包含图像并将其显示在一行的容器。然后，我想为该容器和图像之间添加一些填充。

查看我的方法。

在我的HTML文件中：

 < div class =icons> 
< div class =email>< a href =mailto：[e-mail] =email>< / a>< / div> 
< div class =twitter>< a href =http://www.twitter.comtitle =twitter> twitter< / a> 
< / div> 
  

在我的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; } 
  

注意：这段代码对我没有用。

解决方案

我会为我的图标创建一个图像精灵。然后对于标记，我将使用列表，并将图标图像设置为它们各自的锚标签的背景图像...这样的东西...

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

  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; 
} 
  

这里是一个要求演示的解决方案： p>

http://jsfiddle.net/Z8zkK/2/

编辑：我更新了我的CSS以匹配我的小提琴。

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:

<div class="icons">
    <div class="email"><a href="mailto:[e-mail]" title="email"></a></div>
    <div class="twitter"><a href="http://www.twitter.com" title="twitter">twitter</a>    
</div>

In my 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.

解决方案

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

<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

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:

http://jsfiddle.net/Z8zkK/2/

Edit: I updated my css to match my fiddle.

这篇关于如何使用HTML和CSS在我的网站上显示社交图标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！