social menu

• Twitter
• Facebook
• LinkedIn
• YouTube
• Instagram

  
  

    

      
Twitter
      
Facebook
      
LinkedIn
      
YouTube
      
Instagram
    
  

.social-menu li a:before {
  font-family: 'Fontawesome';
  -webkit-font-smoothing: antialiased;
  content: '\f08e';
}

.social-menu li a[href*="dribbble.com"]::before { content: '\f17d'; }

.social-menu li a[href*="facebook.com"]::before { content: '\f09a'; }

.social-menu li a[href*="flickr.com"]::before { content: '\f16e'; }

.social-menu li a[href*="foursquare.com"]::before { content: '\f180'; }

.social-menu li a[href*="github.com"]::before { content: '\f09b'; }

.social-menu li a[href*="plus.google.com"]::before { content: '\f0d5'; }

.social-menu li a[href*="instagram.com"]::before { content: '\f16d'; }

.social-menu li a[href*="jsfiddle.com"]::before { content: '\f1cc'; }

.social-menu li a[href*="linkedin.com"]::before { content: '\f0e1'; }

.social-menu li a[href*="pinterest.com"]::before { content: '\f0d2'; }

.social-menu li a[href*="reddit.com"]::before { content: '\f1a1'; }

.social-menu li a[href*="soundcloud.com"]::before { content: '\f1be'; }

.social-menu li a[href*="stackoverflow.com"]::before { content: '\f16c'; }

.social-menu li a[href*="tumblr.com"]::before { content: '\f173'; }

.social-menu li a[href*="twitter.com"]::before { content: '\f099'; }

.social-menu li a[href*="vimeo.com"]::before { content: '\f194'; }

.social-menu li a[href*="vine.co"]::before { content: '\f1ca'; }

.social-menu li a[href*="yelp.com"]::before { content: '\f1e9'; }

.social-menu li a[href*="youtube.com"]::before { content: '\f167'; }

.social-menu li a[href*="wordpress.com"]::before { content: '\f19a'; }

/* Flexbox stuff */

.social-menu ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Base styles that apply to all menus */
.menu-section {
  padding-bottom: 2em;
  margin-bottom: 2em;
  border-bottom: 1px solid hsl(0, 0%, );
}

.menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  background: hsl(0, 0%, 15%);
}

.menu li a {
  display: block;
  text-decoration: none;
  color: white;
  padding: .6em 1em;
}

.menu li a:hover {
  background: hsl(0, 0%, 25%);
}