时间戳

首页 > 解决方案 > 如何堆叠社交图标

html - 如何堆叠社交图标

问题描述

我脑袋放屁。如果之前已经回答过这个问题，我深表歉意，但我真的不知道开发人员的术语，所以我不确定该输入什么。

我已经建立了自己的社交图标，它将位于屏幕的右侧。目前，我为每个具有高度的图标使用单独的类： number vh; 使它们堆叠在顶部。我确定这不是正确的方法。谁能指出我正确的方向？

这是我当前的代码：

.fa-facebook {
  background: purple;
  opacity: 0.5;	
  color: white !important;
border: 2px solid white;	
}

.fa-twitter {
  background: purple;
  opacity: 0.5;
  color: white !important;
border: 2px solid white;		
}
/*social*/
.fa-social {
  padding: 10px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 0;
  position: fixed;
  right: 10px;	
}
  p.social {
  position: fixed;
  right: 13px;
  top:30vh;
  text-align: center;
 font-weight: 800;	  
	}	
	.fa-social-1{
    top:35vh;
	}
	.fa-social-2{
    top:45vh;
	}

.fa:hover {
    opacity: 0.9;
}
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        

<a style="text-decoration: none;" target="_blank" class="fa fa-social fa-social-1 fa-facebook"></a>
<a style="text-decoration: none;" target="_blank" class="fa fa-social fa-social-2 fa-twitter"></a>

标签： htmlcssfont-awesome

解决方案

您可以使用弹性盒。它会清理你的大部分 CSS。

<div class="social-group">
  <a style="text-decoration: none;" target="_blank" class="fa fa-social fa-social-1 fa-facebook"></a>
  <a style="text-decoration: none;" target="_blank" class="fa fa-social fa-social-2 fa-twitter"></a>
</div>

..

     /* Only CSS */

.fa-facebook, .fa-twitter {
  background: purple;
  opacity: 0.5; 
  color: white !important;
  border: 2px solid white;  
  padding: 10px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 0;
}
  /* Extra CSS */

  .social-group {
    display: flex;
    justify-content: flex-end;
    margin-top: 30vh;
  }

.fa:hover {
    opacity: 0.9;
}

工作示例

https://jsfiddle.net/khvrLyon/

推荐阅读