Новые социальные иконки

Rating: 9.8
Author: Денис Абдуллин

02012-10-243293Денис Абдуллин

Новые социальные иконки. Иконки по умолчанию в серых оттенках, а при наведение (hover) они становиться цветными. Такие иконки можно установить в нижнюю часть сайта или в верхнюю.

Устанавливаем стили для социальных иконок:

Code

.twitter {display:inline-block;width:41px;height:41px;background:url('https://www.dropbox.com/s/20vb1f180wl5kcy/social-icon-1.png') no-repeat;}
.facebook {display:inline-block;width:41px;height:41px;background:url('https://www.dropbox.com/s/20vb1f180wl5kcy/social-icon-1.png') -41px 0 no-repeat;}
.google {display:inline-block;width:41px;height:41px;background:url('https://www.dropbox.com/s/20vb1f180wl5kcy/social-icon-1.png') -82px 0 no-repeat;}
.dribbble {display:inline-block;width:41px;height:41px;background:url('https://www.dropbox.com/s/20vb1f180wl5kcy/social-icon-1.png') -123px 0 no-repeat;}
.flickr {display:inline-block;width:41px;height:41px;background:url('https://www.dropbox.com/s/20vb1f180wl5kcy/social-icon-1.png') -164px 0 no-repeat;}
.twitter:hover {background-position:0 -41px;}
.facebook:hover {background-position:-41px -41px;}
.google:hover {background-position:-82px -41px;}
.dribbble:hover {background-position:-123px -41px;}
.flickr:hover {background-position:-164px -41px;}

Это ставим там где хотите их видеть:

Code