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

Instead of <p> use span tag
 <div class="social-bar">

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

  </div>

Answer 2

您可以使用background-image。 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;
}

Answer 3

vertical-align：super; display：inline-block;在.social-bar p中添加这一行。然后它会工作

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

3 个答案: