<!-- SCSS Social Icons. Applying the BEM Methodology to HTML and CSS -->

<div class="social__container">   

    <!-- social__item linkedin -->
    <div class="social__item">
            <a target="_blank" href="https://www.linkedin.com/pub/steven-roberts/7a/707/409" class="social__icon--linkedin"><i class="icon--linkedin"></i></a>
    </div>
    <!-- /social__item linkedin -->

    <!-- social__item twitter -->
    <div class="social__item">
            <a target="_blank" href="https://twitter.com/matchboxhero10" class="social__icon--twitter"><i class="icon--twitter"></i></a>
    </div>
    <!-- /social__item twiter -->

    <!-- social__item google+ -->
    <div class="social__item">
            <a target="_blank" href="https://plus.google.com/u/0/+StevenRoberts-mbh/posts" class="social__icon--googleplus"><i class="icon--googleplus"></i></a>
    </div>
    <!-- /social__item google+ -->

    <!-- social__item soundcloud -->
    <div class="social__item">
            <a target="_blank" href="https://soundcloud.com/matchboxhero" class="social__icon--soundcloud"><i class="icon--soundcloud"></i></a>
    </div>
    <!-- /social__item soundcloud -->
  
    <!-- social__item vimeo -->
    <div class="social__item">
            <a target="_blank" href="https://vimeo.com/" class="social__icon--vimeo"><i class="icon--vimeo"></i></a>
    </div>
    <!-- /social__item vimeo -->
  
    <!-- social__item facebook -->
    <div class="social__item">
            <a target="_blank" href="https://facebook.com" class="social__icon--facebook"><i class="icon--facebook"></i></a>
    </div>
    <!-- /social__item facebook -->
  
    <!-- social__item pintrest -->
    <div class="social__item">
            <a target="_blank" href="http://pintrest.com" class="social__icon--pintrest"><i class="icon--pintrest"></i></a>
    </div>
    <!-- /social__item pintrest -->
  
    <!-- social__item dribble -->
    <div class="social__item">
            <a target="_blank" href="http://dribbble.com" class="social__icon--dribble"><i class="icon--dribble"></i></a>
    </div>
    <!-- /social__item dribble -->
  
    <!-- social__item stumbleupon -->
    <div class="social__item">
            <a target="_blank" href="http://stumbleupon.com" class="social__icon--stumbleupon"><i class="icon--stumbleupon"></i></a>
    </div>
    <!-- /social__item stumbleupon -->
  
    <!-- social__item lastfm -->
    <div class="social__item">
            <a target="_blank" href="http://last.fm" class="social__icon--lastfm"><i class="icon--lastfm"></i></a>
    </div>
    <!-- /social__item lastfm -->
  
    <!-- social__item flickr -->
    <div class="social__item">
            <a target="_blank" href="http://flickr.com" class="social__icon--flickr"><i class="icon--flickr"></i></a>
    </div>
    <!-- /social__item flickr -->
  
    <!-- social__item instagram -->
    <div class="social__item">
            <a target="_blank" href="http://instagram.com" class="social__icon--instagram"><i class="icon--instagram"></i></a>
    </div>
    <!-- /social__item instagram -->
  
    <!-- social__item dropbox -->
    <div class="social__item">
            <a target="_blank" href="https://dropbox.com" class="social__icon--dropbox"><i class="icon--dropbox"></i></a>
    </div>
    <!-- /social__item dropbox -->
  
    <!-- social__item behance -->
    <div class="social__item">
            <a target="_blank" href="http://behance.com" class="social__icon--behance"><i class="icon--behance"></i></a>
    </div>
    <!-- /social__item behance -->
  
    <!-- social__item skype -->
    <div class="social__item">
            <a target="_blank" href="http://skype.com" class="social__icon--skype"><i class="icon--skype"></i></a>
    </div>
    <!-- /social__item skype -->
 
    <!-- social__item github -->
    <div class="social__item">
            <a target="_blank" href="https://github.com" class="social__icon--github"><i class="icon--github"></i></a>
    </div>
    <!-- /social__item github -->
  
  	<!-- social__item RSS -->
    <div class="social__item">
            <a target="_blank" href="#" class="social__icon--rss"><i class="icon--rss"></i></a>
    </div>
    <!-- /social__item RSS -->

</div>

*,
*::before,
*::after {
  box-sizing: border-box;
}

// Import Font
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);

// List of icons and colours
$icon-list: (
    vimeo "\f27d" #4dbfe3,
    twitter "\f099" #32b9e7,
    facebook "\f09a" #4b70ab,
    googleplus "\f0d5" #fa5432,
    pintrest "\f231" #d63533,
    linkedin "\f0e1" #0087be,
    dribble "\f17d" #fc89b1,
    stumbleupon "\f1a4" #f15d29,
    lastfm "\f202" #e42124,
    instagram "\f16d" #6291b2,
    dropbox "\f16b" #167ab6,
    soundcloud "\f1be" #fb740b,
    behance "\f1b4" #33abdb,
    skype "\f17e" #00AFF0,
    github "\f113" #333333,
    flickr "\f16e" #333333,
    rss "\f09e" #FB7629,
);

// Each loop for creating the icon CSS
@each $icon, $unicode, $icon-background in $icon-list {
  
    .icon--#{$icon} {
        &::before {
            content: $unicode;
        }
    }

    .social__icon--#{$icon} {
      background-color: $icon-background;
      
        &:hover {
          // Swap black for white to make the icons lighter on hover
          background-color: mix(black, $icon-background, 15%);
        }
      
    }

}

// Display icons next to each other
.social__item {
    display: inline-block;
    margin-right: 0.1em;
}

// Basic icon style
.icon {
	font-family: 'FontAwesome';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	// Better Font Rendering
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

// Extend icon to all other icons
[class^="icon--"] {
	@extend .icon;
}

// Icon background
.social__icon {
  font-size: 1.4em;
  color: white;
  text-decoration: none;
  // Remove border radius to make icons square
  border-radius:100%;
  width: 2.2em;
  height: 2.2em;
  text-align: center;
  
  // Vertical Centering
  display: flex;
  align-items: center;
  justify-content: center;
}

// Extend social__icon to all other icons
[class^="social__icon"] {
	@extend .social__icon;
}

// Add padding to icons container
.social__container {
  padding: 1em;
  font-size: 1.5em;
}