html - CSS 在文本旁边添加社交图标

Question

这是我的 jsfiddle DEMO

我需要在“关注我们”文本下添加社交图标。

而且我必须处理每个链接。但我只有一张图片..

所以我需要设置类似的位置。但我只是不知道如何设置。

HTML

  <div class="social-bar">        
      <p class="follow-us">Follow Us</p>
      <a>
        <img src="http://s13.postimg.org/63sed3cjn/social_icons.png" />
     </a>    
  </div>

谁能帮我解决这个问题，？

谢谢，

Answer 1

您可以使用背景图像。 demo fiddle

HTML:

<div class="social-bar">
  <p class="follow-us">
    <span class="follow">Follow Us</span>
    <a href="#" class="social fb"></a>
    <a href="#" class="social twitter"></a>
    <a href="#" class="social google"></a>
    <a href="#" class="social pinterest"></a>
  </p>
</div>

CSS:

.social-bar{
  border-top:1px solid red;
  width:922px;
  background-color:#ef9d9d;
  border-radius: 3px;
  border: 1px solid #e48181; 
  height:49px;
  margin:0 auto;
  margin-bottom:20px;
  position: relative;
}
.social-bar p{
  font-family:Arial;
  font-size:16px;
  color: #fff;
  margin-left:10px;
}
.social {
    background-image: url(http://s13.postimg.org/63sed3cjn/social_icons.png);
    display: inline-block;
    width: 25px;
    height: 25px;
}

.social.twitter {
    background-position: -35px 0;
}

.social.google {
    background-position: -70px 0;
}

.social.pinterest {
    background-position: -100px 0;
}