Advertisement
Guest User

Icons CSS

a guest
Apr 1st, 2014
26
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 6.68 KB | None | 0 0
  1. #top-header {
  2.     padding-top: 10px;
  3.     padding-bottom: 5px;
  4.     text-align: center;
  5. }
  6. #top-header .social-links {
  7.     margin: 0;
  8. }
  9. #top-header .social-links li {
  10.     margin-right: 5px;
  11.     margin-bottom: 5px;
  12.     display: inline-block;
  13. }
  14. #top-header .social-links li a {
  15.     width: 32px;
  16.     height: 32px;
  17.     display: inline-block;
  18.     text-indent: -9999px;
  19. }
  20. #top-header .social-links .lol-facebook {
  21.     background: #3B5998 url(images/social/facebook.png) 0 0 no-repeat;
  22. }
  23. #top-header .social-links .lol-twitter {
  24.     background: #39A9E0 url(images/social/twitter.png) 0 0 no-repeat;
  25. }
  26. #top-header .social-links .lol-dribbble {
  27.     background: #EA4C89 url(images/social/dribbble.png) 0 0 no-repeat;
  28. }
  29. #top-header .social-links .lol-linkedin {
  30.     background: #007FB1 url(images/social/linkedin.png) 0 0 no-repeat;
  31. }
  32. #top-header .social-links .lol-flickr {
  33.     background: #0063DB url(images/social/flickr.png) 0 0 no-repeat;
  34. }
  35. #top-header .social-links .lol-tumblr {
  36.     background: #2C4762 url(images/social/tumblr.png) 0 0 no-repeat;
  37. }
  38. #top-header .social-links .lol-vimeo {
  39.     background: #44BBFF url(images/social/vimeo.png) 0 0 no-repeat;
  40. }
  41. #top-header .social-links .lol-vine {
  42.     background: #00A47A url(images/social/vine.png) 0 0 no-repeat;
  43. }
  44. #top-header .social-links .lol-youtube {
  45.     background: #CD332D url(images/social/youtube.png) 0 0 no-repeat;
  46. }
  47. #top-header .social-links .lol-instagram {
  48.     background: #3F729B url(images/social/instagram.png) 0 0 no-repeat;
  49. }
  50. #top-header .social-links .lol-google {
  51.     background: #D14836 url(images/social/google.png) 0 0 no-repeat;
  52. }
  53. #top-header .social-links .lol-stumbleupon {
  54.     background: #EB4924 url(images/social/stumbleupon.png) 0 0 no-repeat;
  55. }
  56. #top-header .social-links .lol-forrst {
  57.     background: #5B9A68 url(images/social/forrst.png) 0 0 no-repeat;
  58. }
  59. #top-header .social-links .lol-behance {
  60.     background: #1769FF url(images/social/behance.png) 0 0 no-repeat;
  61. }
  62. #top-header .social-links .lol-digg {
  63.     background: #14589E url(images/social/digg.png) 0 0 no-repeat;
  64. }
  65. #top-header .social-links .lol-delicious {
  66.     background: #3274D1 url(images/social/delicious.png) 0 0 no-repeat;
  67. }
  68. #top-header .social-links .lol-deviantart {
  69.     background: #4B5D50 url(images/social/deviantart.png) 0 0 no-repeat;
  70. }
  71. #top-header .social-links .lol-foursquare {
  72.     background: #2398C9 url(images/social/foursquare.png) 0 0 no-repeat;
  73. }
  74. #top-header .social-links .lol-github {
  75.     background: #4183C4 url(images/social/github.png) 0 0 no-repeat;
  76. }
  77. #top-header .social-links .lol-myspace {
  78.     background: #008DDE url(images/social/myspace.png) 0 0 no-repeat;
  79. }
  80. #top-header .social-links .lol-orkut {
  81.     background: #ED2590 url(images/social/orkut.png) 0 0 no-repeat;
  82. }
  83. #top-header .social-links .lol-pinterest {
  84.     background: #CB2027 url(images/social/pinterest.png) 0 0 no-repeat;
  85. }
  86. #top-header .social-links .lol-soundcloud {
  87.     background: #FF6600 url(images/social/soundcloud.png) 0 0 no-repeat;
  88. }
  89. #top-header .social-links .lol-stackoverflow {
  90.     background: #F47920 url(images/social/stackoverflow.png) 0 0 no-repeat;
  91. }
  92. #top-header .social-links .lol-houzz {
  93.     background: #89C542 url(images/social/houzz.png) 0 0 no-repeat;
  94. }
  95. #top-header .social-links .lol-rss {
  96.     background: #FF8300 url(images/social/rss.png) 0 0 no-repeat;
  97. }
  98.  
  99.  
  100. @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  101.  
  102. #top-header .social-links .lol-facebook {
  103.     background-image: url(images/social/facebook@2x.png);
  104.     background-size: 32px 32px;
  105. }
  106. #top-header .social-links .lol-twitter {
  107.     background-image: url(images/social/twitter@2x.png);
  108.     background-size: 32px 32px;
  109. }
  110. #top-header .social-links .lol-dribbble {
  111.     background-image: url(images/social/dribbble@2x.png);
  112.     background-size: 32px 32px;
  113. }
  114. #top-header .social-links .lol-linkedin {
  115.     background-image:url(images/social/linkedin@2x.png);
  116.     background-size: 32px 32px;
  117. }
  118. #top-header .social-links .lol-flickr {
  119.     background-image: url(images/social/flickr@2x.png);
  120.     background-size: 32px 32px;
  121. }
  122. #top-header .social-links .lol-tumblr {
  123.     background-image: url(images/social/tumblr@2x.png);
  124.     background-size: 32px 32px;
  125. }
  126. #top-header .social-links .lol-vimeo {
  127.     background-image: url(images/social/vimeo@2x.png);
  128.     background-size: 32px 32px;
  129. }
  130. #top-header .social-links .lol-vine {
  131.     background-image: url(images/social/vine@2x.png);
  132.     background-size: 32px 32px;
  133. }
  134. #top-header .social-links .lol-youtube {
  135.     background-image: url(images/social/youtube@2x.png);
  136.     background-size: 32px 32px;
  137. }
  138. #top-header .social-links .lol-instagram {
  139.     background-image: url(images/social/instagram@2x.png);
  140.     background-size: 32px 32px;
  141. }
  142. #top-header .social-links .lol-google {
  143.     background-image: url(images/social/google@2x.png);
  144.     background-size: 32px 32px;
  145. }
  146. #top-header .social-links .lol-stumbleupon {
  147.     background-image: url(images/social/stumbleupon@2x.png);
  148.     background-size: 32px 32px;
  149. }
  150. #top-header .social-links .lol-forrst {
  151.     background-image: url(images/social/forrst@2x.png);
  152.     background-size: 32px 32px;
  153. }
  154. #top-header .social-links .lol-behance {
  155.     background-image: url(images/social/behance@2x.png);
  156.     background-size: 32px 32px;
  157. }
  158. #top-header .social-links .lol-digg {
  159.     background-image: url(images/social/digg@2x.png);
  160.     background-size: 32px 32px;
  161. }
  162. #top-header .social-links .lol-delicious {
  163.     background-image: url(images/social/delicious@2x.png);
  164.     background-size: 32px 32px;
  165. }
  166. #top-header .social-links .lol-deviantart {
  167.     background-image: url(images/social/deviantart@2x.png);
  168.     background-size: 32px 32px;
  169. }
  170. #top-header .social-links .lol-foursquare {
  171.     background-image: url(images/social/foursquare@2x.png);
  172.     background-size: 32px 32px;
  173. }
  174. #top-header .social-links .lol-github {
  175.     background-image: url(images/social/github@2x.png);
  176.     background-size: 32px 32px;
  177. }
  178. #top-header .social-links .lol-myspace {
  179.     background-image: url(images/social/myspace@2x.png);
  180.     background-size: 32px 32px;
  181. }
  182. #top-header .social-links .lol-orkut {
  183.     background-image: url(images/social/orkut@2x.png);
  184.     background-size: 32px 32px;
  185. }
  186. #top-header .social-links .lol-pinterest {
  187.     background-image: url(images/social/pinterest@2x.png);
  188.     background-size: 32px 32px;
  189. }
  190. #top-header .social-links .lol-soundcloud {
  191.     background-image: url(images/social/soundcloud@2x.png);
  192.     background-size: 32px 32px;
  193. }
  194. #top-header .social-links .lol-stackoverflow {
  195.     background-image: url(images/social/stackoverflow@2x.png);
  196.     background-size: 32px 32px;
  197. }
  198. #top-header .social-links .lol-houzz {
  199.     background-image: url(images/social/houzz@2x.png);
  200.     background-size: 32px 32px;
  201. }
  202. #top-header .social-links .lol-rss {
  203.     background-image: url(images/social/rss@2x.png);
  204.     background-size: 32px 32px;
  205. }
  206.  
  207. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement