这是我的 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>
谁能帮我解决这个问题吗?
谢谢
最佳答案
您可以使用背景图像
。 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;
}
关于html - CSS 在文本旁边添加社交图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30861265/