Question

HTML CODE ...

          <ul class="social-icon">
            <li><a href="#" class="social-facebook">
            <i class="fa fa-facebook"></i>
            <i class="fa fa-facebook ff"></i>
            </a></li>
            <li><a href="#" class="social-twitter"><i class="fa fa-twitter"></i></a></li>
            <li><a href="#" class="social-google-plus"><i class="fa fa-google-plus"></i></a></li>
            <li><a href="#" class="social-dribbble"><i class="fa fa-dribbble"></i></a></li>
            <li><a href="#" class="social-linkedin"><i class="fa fa-linkedin"></i></a></li>
            <li><a href="#" class="social-rss"><i class="fa fa-rss"></i></a></li>
          </ul>

CSS CODE ..

.social-icon {
  text-align: center;
  text-decoration: none;
}
.social-icon li {
  list-style: none;
  display: inline-block;
  float: left;
  border: 1px solid #000;
  border-left: 0;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}
.social-icon li:first-child {
  border-left: 1px solid #000;
}
.social-icon li a {
  display: inline-block;
  font-size: 18px;
  line-height: 38px;
  width: 35px;
  text-decoration: none;
  outline: none;
}
.social-icon li a i {
  color: #d2d2db;
}

我想在同一个位置显示这两个图标，就像一个图标......请帮助我。对不起，我的英语不好。 Here is jsfiddle editor link

Answer 1

如果你需要2个图标来悬停效果，你应该做这样的事情;

a { background: url(/image1.png) no-repeat 0 0;}

a:hover{ background: url(/image2.png) no-repeat 0 0; }

Answer 2

是的，有可能。只需将此代码与其他代码一起添加：

 .social-icon li{ position:relative; }

 .social-icon li a i {
        color: #d2d2db;
        position:absolute;
        left:10px;
        top:4px;
  }

检查并告诉我。这是小提琴：http://jsfiddle.net/2N2YF/38/

Answer 3

我想这就是你想要的。正确？

http://jsfiddle.net/2N2YF/39/

 I just add:
 position:absolute;

使用css在同一位置显示2个图标？

3 个答案: