BEM Social-Block Style - 1

BEM Social-Block- 1

<!-- begin Social Block -->
<div class="social-block">
  <ul class="social-block__items clearfix">
    <li class="social-block__item">
      <a class="social-block__item-link" href="#">
        <span class="social-block__item-icon social-block__item-icon_vkontakte fontello"></span>
      </a>
    </li>
    <li class="social-block__item">
      <a class="social-block__item-link" href="#">
        <span class="social-block__item-icon social-block__item-icon_odnoklassniki fontello"></span>
      </a>
    </li>
    <li class="social-block__item">
      <a class="social-block__item-link" href="#">
        <span class="social-block__item-icon social-block__item-icon_facebook fontello"></span>
      </a>
    </li>
    <li class="social-block__item">
      <a class="social-block__item-link" href="#">
        <span class="social-block__item-icon social-block__item-icon_twitter fontello"></span>
      </a>
    </li>
    <li class="social-block__item">
      <a class="social-block__item-link" href="#">
        <span class="social-block__item-icon social-block__item-icon_instagram fontello"></span>
      </a>
    </li>
    <li class="social-block__item">
      <a class="social-block__item-link" href="#">
        <span class="social-block__item-icon social-block__item-icon_google-plus fontello"></span>
      </a>
    </li>
    <li class="social-block__item">
      <a class="social-block__item-link" href="#">
        <span class="social-block__item-icon social-block__item-icon_linkedin fontello"></span>
      </a>
    </li>
    <li class="social-block__item">
      <a class="social-block__item-link" href="#">
        <span class="social-block__item-icon social-block__item-icon_youtube fontello"></span>
      </a>
    </li>
    <li class="social-block__item">
      <a class="social-block__item-link" href="#">
        <span class="social-block__item-icon social-block__item-icon_tumblr fontello"></span>
      </a>
    </li>
    <li class="social-block__item">
      <a class="social-block__item-link" href="#">
        <span class="social-block__item-icon social-block__item-icon_skype fontello"></span>
      </a>
    </li>
    <li class="social-block__item">
      <a class="social-block__item-link" href="#">
        <span class="social-block__item-icon social-block__item-icon_yandex fontello"></span>
      </a>
    </li>
    <li class="social-block__item">
      <a class="social-block__item-link" href="#">
        <span class="social-block__item-icon social-block__item-icon_vimeo fontello"></span>
      </a>
    </li>
    <li class="social-block__item">
      <a class="social-block__item-link" href="#">
        <span class="social-block__item-icon social-block__item-icon_pinterest fontello"></span>
      </a>
    </li>
    <li class="social-block__item">
      <a class="social-block__item-link" href="#">
        <span class="social-block__item-icon social-block__item-icon_behance fontello"></span>
      </a>
    </li>
    <li class="social-block__item">
      <a class="social-block__item-link" href="#">
        <span class="social-block__item-icon social-block__item-icon_github fontello"></span>
      </a>
    </li>
  </ul>
</div>
<!-- end Social Block -->



/* -------------------------------------------------------------------------
   begin Social Block
 * ------------------------------------------------------------------------- */

.social-block {
  .social-block__item {
    float: left;
  }
  .social-block__item-link {
    display: block;
  }
  .social-block__item-icon {
    display: block;
    &:before {
      color: #1C79C0;
      font-size: 20px;
      transition: color .3s;
    }
    &:hover {
      &:before {
        color: #5692bf;
      }
    }
    &.social-block__item-icon_vkontakte {
      &:before {
        content: '\f189';
      }
    }
    &.social-block__item-icon_odnoklassniki {
      &:before {
        content: '\f263';
      }
    }
    &.social-block__item-icon_facebook {
      &:before {
        content: '\f30c';
      }
    }
    &.social-block__item-icon_twitter {
      &:before {
        content: '\f309';
      }
    }
    &.social-block__item-icon_instagram {
      &:before {
        content: '\f32d';
      }
    }
    &.social-block__item-icon_google-plus {
      &:before {
        content: '\f30f';
      }
    }
    &.social-block__item-icon_linkedin {
      &:before {
        content: '\f318';
      }
    }
    &.social-block__item-icon_youtube {
      &:before {
        content: '\f167';
      }
    }
    &.social-block__item-icon_tumblr {
      &:before {
        content: '\f315';
      }
    }
    &.social-block__item-icon_skype {
      &:before {
        content: '\f339';
      }
    }
    &.social-block__item-icon_yandex {
      &:before {
        content: '\f305';
      }
    }
    &.social-block__item-icon_vimeo {
      &:before {
        content: '\f306';
      }
    }
    &.social-block__item-icon_pinterest {
      &:before {
        content: '\f312';
      }
    }
    &.social-block__item-icon_behance {
      &:before {
        content: '\f34e';
      }
    }
    &.social-block__item-icon_github {
      &:before {
        content: '\f300';
      }
    }
  }
}


/* -------------------------------------------------------------------------
   end Social Block
 * ------------------------------------------------------------------------- */