Instantly share code, notes, and snippets.

Embed
What would you like to do?
BEM Social-Block Style - 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
* ------------------------------------------------------------------------- */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment