Как складывать социальные иконки

Question

У меня пердит мозг. Я прошу прощения, если на этот вопрос уже был дан ответ, но я не очень хорошо знаю язык разработчика, поэтому я не уверен, что печатать.

Я построил свои собственные социальные иконки, которые будут располагаться в правой части экрана. В настоящее время я использую отдельный класс для каждого значка с высотой: номер 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>

Answer 1

Вам нужно добавить отступы в тегах, вот пример:

   <a style="text-decoration: none; padding-bottom: 10px" target="_blank" 
   class="fa fa-social fa-social-1 fa-facebook"></a>

   <a style="text-decoration: none; padding-top: 10px" target="_blank" 
   class="fa fa-social fa-social-2 fa-twitter"></a>

Если это не работает, попробуйте:

 <div class="container" style="padding-bottom: 10px;">
 <a style="text-decoration: none;" target="_blank" class="fa fa-social fa- 
 social-1 fa-facebook"></a>
 </div>

 <div class="container" style="padding-top: 10px;">
 <a style="text-decoration: none;" target="_blank" class="fa fa-social fa-
 social-2 fa-twitter"></a>
 </div>

Answer 2

Вы можете использовать flexbox. Это очистит большую часть вашей 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>

Css ..

     /* 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/

Answer 3

Лучше не использовать фиксированное положение для элементов по отдельности - лучше поместить их в контейнер, расположить их и позволить браузеру обрабатывать макет.

.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;
  right: 10px;	
}
.fa:hover {
    opacity: 0.9;
}
#social-container{
    position:fixed;
    right:0;
    top:35vh;
    display:flex;
    flex-direction:column;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        

<div id="social-container">
    <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>