How to stack social icons - html

Question

I'm having a brain fart. I apologize if this question has been answered before, but I don't really know developer lingo so I'm not sure what to type in.
I have built my own social icons, which will sit on the right of the screen. Currently, I'm using a seperate class for each icon with height: number vh; to make them stacked on top. I'm sure this isn't the correct way. Could anyone point me in the right direction?
Here is my current code:
.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

You can use flexbox. It will clean up most of your 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;
}
Working example
https://jsfiddle.net/khvrLyon/

Answer 2

Best not to use fixed position for the items individually - better to put them in a container, position that and let the browser handle the layout.
.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>

Answer 3

You need to add padding in the Tags, here is an example:
<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>
If this does not work try:
<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>