SHARE
TWEET

Css social icons

a guest Sep 14th, 2016 8 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. .social_icon {
  2.     display:inline-block;
  3.     vertical-align:top;
  4.     margin-top:15px;
  5. }
  6. .facebook_32x32{
  7.     background: url("../images/social.png");
  8.     background-position: 0;
  9.     background-size: 295px;
  10.     width: 32px;
  11.     height: 32px;
  12. }
  13. .twitter_32x32{
  14.     background: url("../images/social.png");
  15.     background-position: -37px;
  16.     background-size: 295px;
  17.     width: 32px;
  18.     height: 32px;
  19. }
  20. .linkedin_32x32{
  21.     background: url("../images/social.png");
  22.     background-position: -75px;
  23.     background-size: 295px;
  24.     width: 32px;
  25.     height: 32px;
  26. }
  27. .pinterest_32x32{
  28.     background: url("../images/social.png");
  29.     background-position: -112px;
  30.     background-size: 295px;
  31.     width: 32px;
  32.     height: 32px;
  33. }
  34. .instagram_32x32{
  35.     background: url("../images/social.png");
  36.     background-position: -150px;
  37.     background-size: 295px;
  38.     width: 32px;
  39.     height: 32px;
  40. }
  41. .tumblr_32x32{
  42.     background: url("../images/social.png");
  43.     background-position: -187px;
  44.     background-size: 295px;
  45.     width: 32px;
  46.     height: 32px;
  47. }
  48. .youtube_32x32{
  49.     background: url("../images/social.png");
  50.     background-position: -224px;
  51.     background-size: 295px;
  52.     width: 32px;
  53.     height: 32px;
  54. }
  55. .google_32x32{
  56.     background: url("../images/social.png");
  57.     background-position: -262px;
  58.     background-size: 295px;
  59.     width: 32px;
  60.     height: 32px;
  61. }
  62. .facebook_32x32:hover{
  63.     background: url("../images/social_hover.png");
  64.     background-position: 0;
  65.     background-size: 295px;
  66.     width: 32px;
  67.     height: 32px;
  68. }
  69. .twitter_32x32:hover{
  70.     background: url("../images/social_hover.png");
  71.     background-position: -37px;
  72.     background-size: 295px;
  73.     width: 32px;
  74.     height: 32px;
  75. }
  76. .linkedin_32x32:hover{
  77.     background: url("../images/social_hover.png");
  78.     background-position: -75px;
  79.     background-size: 295px;
  80.     width: 32px;
  81.     height: 32px;
  82. }
  83. .pinterest_32x32:hover{
  84.     background: url("../images/social_hover.png");
  85.     background-position: -112px;
  86.     background-size: 295px;
  87.     width: 32px;
  88.     height: 32px;
  89. }
  90. .instagram_32x32:hover{
  91.     background: url("../images/social_hover.png");
  92.     background-position: -150px;
  93.     background-size: 295px;
  94.     width: 32px;
  95.     height: 32px;
  96. }
  97. .tumblr_32x32:hover{
  98.     background: url("../images/social_hover.png");
  99.     background-position: -187px;
  100.     background-size: 295px;
  101.     width: 32px;
  102.     height: 32px;
  103. }
  104. .youtube_32x32:hover{
  105.     background: url("../images/social_hover.png");
  106.     background-position: -224px;
  107.     background-size: 295px;
  108.     width: 32px;
  109.     height: 32px;
  110. }
  111. .google_32x32:hover{
  112.     background: url("../images/social_hover.png");
  113.     background-position: -262px;
  114.     background-size: 295px;
  115.     width: 32px;
  116.     height: 32px;
  117. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top