Wie ordne ich meine Social Media Icons vertikal an?

Question

Ich möchte meine Social Media Icons vertikal in der oberen rechten Ecke meiner Website anordnen. Ich habe versucht, beide klar zu machen, aber es scheint nicht zu funktionieren. Bitte werfen Sie einen Blick auf meinen HTML- und CSS-Code.

HTML-Code:

<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-Code:

.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; 
} 

Answer 1

Diese Antwort vorausgesetzt, dass Sie den Text auf dem Ansichtsfenster zentriert werden sollen. Ich würde eigentlich empfehlen, 2 Spalten für dieses, eins für den Text und eins für die Ikonen zu machen.

HTML

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

Geänderte CSS

.social-menu { 
    position: absolute; 
    right: 10px; 
    top: 10px; 
} 
.social-menu ul li { 
    margin: 20px 0px; 
} 
.container { 
    margin: 0; 
    padding: 10px; 
    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%; 
} 

https://jsfiddle.net/fLnkvo2z/1/

Answer 2

Ihr Grid-System prüfen. Wenn Sie Bootstrap verwenden, dann erstellen Sie das Grid-System Ihrer Webseite. Ich schlage vor, Sie dnt für Marge gehen. Verwenden Sie stattdessen Bootstrap.

Answer 3

Hier ist eine minimale Möglichkeit, dies zu erreichen: (Vor bearbeiten)

float: right Fügen Sie einfach und ein Pseudo-Element: .mediaicon::after mit Eigenschaft clear: both

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

.medication::after { 
    clear: both; 
} 

Edit:

Geändert sowohl die oberen nav als auch die media icons zu flexbox mit differ nt justify-content (center und flex-end)

Working fiddle