내 소셜 미디어 아이콘을 수직으로 정렬하는 방법은 무엇입니까?

내 웹 사이트의 오른쪽 상단에 내 소셜 미디어 아이콘을 세로로 정렬하고 싶습니다. 나는 둘 다 명확하게 추가하려고 시도했지만 작동하지 않는 것 같습니다. 내 HtML 및 CSS 코드를 살펴보십시오.

HTML 코드 :

<div id="cover">
<div class="mediaicon">
  <ul>
  <li>
    <a href="https://www.facebook.com/prashant.bagga1" class="fa fa-facebook"></a>
  </li>
  <li>
    <a href="https://www.linkedin.com/in/prashant774/" class="fa fa-linkedin"></a>
  </li>
  <li>
    <a href="https://www.snapchat.com/add/splendidprash" class="fa fa-snapchat"></a>
  </li>
  </ul> 
</div> 
<div class="cover-content">
  <h1>Being A Technocrat</h1>
  <h2>Prashant Bagga</h2>
</div>
</div>

CSS 코드 :

.mediaicon {
 padding: 0;
 margin-right: 0;
 padding-top: 100px;
 }

 .mediaicon li {
 clear: both!important;
 }

 .fa {
 padding: 10px;
 font-size: 15px;
 width: 15px;
 text-align: center;
 text-decoration: none;
 margin: 5px 5px;
 border-radius: 100%;
 }

.fa:hover {
opacity: 0.5;
}

.fa-facebook {
background: #3B5998;
color: white;
}

.fa-linkedin {
background: #007bb5;
color: white;
}
.fa-snapchat {
background: #fffc00;
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
#cover {
background: url("http://moheban-ahlebeit.com/images/Texture-Wallpaper/Texture-Wallpaper-2.jpg") no-repeat center bottom;
background-size: cover;
background-attachment: fixed;
height: 800px;
position: relative;
width: 100%;
}
.cover-content {
box-sizing: border-box;
margin: 0 auto;
position: relative;
text-align: center;
top: 100px;
width: 100%;
height: 800px;
}

h1 {
color: #FFF;
font-family: 'Lobster', cursive;
font-size: 600%;
line-height: 60px;
padding-top: 0;
text-align: center;
}

h2 {
color:#FFF;
font-family: 'Josefin Sans', sans-serif;
font-size: 25px;
font-weight: 900;
text-align: center;
text-transform: uppercase;
letter-spacing: 20px;
}