Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
FontAwesome Social Media Menu
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
<style>
.social-menu {
display: flex;
list-style-type: none;
}
.social-menu i {
color: #fff;
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 25px;
margin-right: 10px;
transition: all 0.2s ease-in-out;
display: flex;
justify-content: center;
}
.social-menu i:before {
display: flex;
flex-flow: row nowrap;
align-items: center;
}
.social-menu a {
text-decoration: none;
}
.fa-facebook {
background:#3b5998
}
.fa-linkedin {
background:#007bb6
}
.fa-twitter {
background:#00aced
}
.fa-instagram {
background:#3f729b
}
.fa-youtube {
background:#c4302b
}
.social-menu i:hover {
opacity: .7;
border-radius: 0;
}
</style>
<ul class="social-menu">
<li><a href="https://facebook.com/"><i class="fab fa-facebook"></i></a></li>
<li><a href="https://linkedin.com/"><i class="fab fa-linkedin"></i></a></li>
<li><a href="https://twitter.com/"><i class="fab fa-twitter"></i></a></li>
<li><a href="https://instagram.com/"><i class="fab fa-instagram"></i> </a></li>
<li><a href="https://youtube.com/"><i class="fab fa-youtube"></i> </a></li>
</ul>
@mykwillis

This comment has been minimized.

Copy link

@mykwillis mykwillis commented Feb 29, 2016

Thanks, Neil.

At line 34, there is a typo.

.google-plus

should be

.fa-google-plus

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment