Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
FontAwesome Social Media Menu
<link href="" rel="stylesheet">
.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 {
.fa-linkedin {
.fa-twitter {
.fa-instagram {
.fa-youtube {
.social-menu i:hover {
opacity: .7;
border-radius: 0;
<ul class="social-menu">
<li><a href=""><i class="fab fa-facebook"></i></a></li>
<li><a href=""><i class="fab fa-linkedin"></i></a></li>
<li><a href=""><i class="fab fa-twitter"></i></a></li>
<li><a href=""><i class="fab fa-instagram"></i> </a></li>
<li><a href=""><i class="fab fa-youtube"></i> </a></li>

This comment has been minimized.

Copy link

@mykwillis mykwillis commented Feb 29, 2016

Thanks, Neil.

At line 34, there is a typo.


should be


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