Flat Social Icons (pure CSS)

Flat-Social-Icons-(pure-CSS).markdown

Flat Social Icons (pure CSS)

Pure CSS social icons (no images), written in SCSS and uses the BEM Methodology for the naming conventions in the HTML and CSS.

14/10/14; Updated to add hover states.

15/10/14; Updated how the buttons vertically center the icon.

20/10/14; Modified the code so only one list and loop is needed.

23/10/14; Added Vertical Centering for icons

07/11/14; Reached 100 hearts! Thank you!

Vanilla CSS version can be found here; http://codepen.io/matchboxhero/pen/wyGKf

Forked from Steven Roberts's Pen Flat Social Icons (pure CSS).

A Pen by Ahmad Awais on CodePen.

License.

index.html

<!-- 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="http://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="http://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="http://dropbox.com" class="social__icon--dropbox"><i class="icon--dropbox"></i></a>
    </div>
    <!-- /social__item dropbox -->
  
    <!-- social__item picasa -->
    <div class="social__item">
            <a target="_blank" href="http://picasa.com" class="social__icon--picasa"><i class="icon--picasa"></i></a>
    </div>
    <!-- /social__item picasa -->
  
    <!-- 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="http://github.com" class="social__icon--github"><i class="icon--github"></i></a>
    </div>
    <!-- /social__item github -->
  
    <!-- social__item rdio -->
    <div class="social__item">
            <a target="_blank" href="http://rdio.com" class="social__icon--rdio"><i class="icon--rdio"></i></a>
    </div>
    <!-- /social__item rdio -->
  
    <!-- social__item evernote -->
    <div class="social__item">
            <a target="_blank" href="http://evernote.com" class="social__icon--evernote"><i class="icon--evernote"></i></a>
    </div>
    <!-- /social__item evernote -->

</div>

style.scss

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

// Import icon font, I've used Entypo (http://entypo.com/)
@import url(http://weloveiconfonts.com/api/?family=entypo);

// List of icon unicode symbols from the icon font
// and background colours for the icons
$icon-list: (
    vimeo "\F306" #4dbfe3,
    twitter "\F309" #32b9e7,
    facebook "\F30C" #4b70ab,
    googleplus "\F30F" #fa5432,
    pintrest "\F312" #d63533,
    linkedin "\F318" #0087be,
    dribble "\F31B" #fc89b1,
    stumbleupon "\F31E" #f15d29,
    lastfm "\F321" #e42124,
    instagram "\F32D" #6291b2,
    dropbox "\F330" #167ab6,
    picasa "\F345" #c49aca,
    soundcloud "\F348" #fb740b,
    behance "\F34E" #33abdb,
    skype "\F339" #00AFF0,
    github "\F300" #333333,
    flickr "\F303" #333333,
    rdio "\F324" #0086CD,
    evernote "\F333" #aaca62
);

// 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: 'entypo';
	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;
  float: left;
  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;
}