Social icon with a fixed position on both desktop and mobile devices.

CSS file

 .scfloatPC { 
        right: 0; 
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        z-index: 999;    
        text-align: center;
    }
   .scfloatPC a {
        display: block;
        margin: 0;
        border-radius: 0;
        width: 56px;
        max-width: none;background-color: #212121;
        height: 56px;
        line-height: 56px;
        float: none;
        padding: 0;
        color: #fff;
        font-size: 20px;
    }
.scfloatPC a:hover, .scfloatPC a:active, .scfloatPC a:focus, .scfloatPC a:visited {
        background-color: rgba(33, 33, 33, 0.5); color:#fff;}
.scfloatPC a .fa{ font-weight: 400;    }
.scfloatPC a i:before{font-family:'fontawesome'}
.scfloatMB{display:none}
    
@media (min-width: 320px) and (max-width: 767px) { 
.scfloatMB {
    display: block;
    position: fixed;
    bottom: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    z-index: 999; 
    left: 0;
    float: none;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    }
  .scfloatMB a {
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
    display: flex;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: .2s;
    width: 56px;
    max-width: none;
    height: 56px;
    line-height: 56px;
    margin: 0;
    float: left;
    padding: 0;
    color: #fff;
    font-size: 20px;
    display: inline-block;
    background-color: #212121;
}
.scfloatMB a:hover, .scfloatMB a:active, .scfloatMB a:focus, .scfloatMB a:visited {
   background-color: rgba(33, 33, 33, 0.5);color: #fff;}
.scfloatMB a .fa{font-weight: 400; }
.scfloatMB a i:before{font-family:'fontawesome'} 
.scfloatPC{display:none}	
}

HTML file

<!-- For Desktop -->
<div class="scfloatPC"> 
    <a href="mailto:#">
        <i class="fa fa-envelope"></i>
    </a>
    <a href="https://api.whatsapp.com/send?phone=02137129830&text=Hallo!" target="_blank">
        <i class="fa fa-whatsapp"></i>  
    </a>
	<a href="https://www.facebook.com/" target="_blank">
        <i class="fa fa-facebook"></i>
    </a>
	<a href="https://www.instagram.com/" target="_blank">
        <i class="fa fa-instagram"></i>
    </a>
    <a href="https://www.youtube.com/" target="_blank">
        <i class="fa fa-youtube"></i> 
    </a>
    
</div> 
<!-- For Mobile -->
<div class="scfloatMB"> 
   <a href="mailto:#">
        <i class="fa fa-envelope"></i>
    </a>
    <a href="https://api.whatsapp.com/send?phone=3123128798123&text=Hallo!" target="_blank">
        <i class="fa fa-whatsapp"></i>  
    </a>
	<a href="https://www.facebook.com/" target="_blank">
        <i class="fa fa-facebook"></i>
    </a>
	<a href="https://www.instagram.com/" target="_blank">
        <i class="fa fa-instagram"></i>
    </a>
    <a href="https://www.youtube.com/" target="_blank">
        <i class="fa fa-youtube"></i> 
    </a>
</div>