SVG Social Media Icons

HTML
<!-- Thanks to codepen.io/brav0 for pointing out that AdBlock Plus blocks the old "social-icons" class: --> <ul class="soc"> <li><a href="#" class="icon-1 8tracks" title="8tracks"><svg viewBox="0 0 512 512"><path d="M185.304 240.455c-47.581 0-86.09 38.586-86.104 86.165 0.012 47.596 38.522 86.182 86.104 86.182 47.54 0 85.997-38.588 86.019-86.182 0-24.309-0.005-30.236-0.005-30.236h-30.743c0 0 0 5.947 0 30.236 -0.028 15.331-6.179 29.058-16.201 39.12 -10.049 10.043-23.753 16.218-39.07 16.218 -15.333 0-29.021-6.179-39.097-16.218 -10.025-10.063-16.175-23.79-16.197-39.12 0.021-15.316 6.172-29.041 16.197-39.104 10.077-10.043 23.764-16.202 39.097-16.221 28.282 0 111.983 0 141.405 0 47.563 0 86.076-38.319 86.092-85.914 -0.016-47.613-38.527-86.164-86.092-86.18 -47.551 0.017-86.074 38.567-86.092 86.18 0 24.181-0.021 29.986-0.021 29.986h30.726c0 0 0-5.805 0-29.986 0.027-15.314 6.267-29.043 16.315-39.121 10.04-10.024 23.744-16.203 39.069-16.203 15.314 0 29.049 6.177 39.098 16.22 10.014 10.062 16.17 23.789 16.17 39.103 0 15.349-6.156 29.06-16.18 39.102 -10.039 10.043-23.773 15.955-39.088 15.971H185.304L185.304 240.455z"/></svg><!--[if lt IE 9]><em>8tracks</em><![endif]--></a></li> <li><a href="#" class="icon-2 500px" title="500px"><svg viewBox="0 0 512 512"><path d="M256.3 293c26.9 31.2 58.3 58.5 99.9 58.5 56.1 0 89.5-42.6 89.5-96.8 0-54-34.1-94.2-89-94.2 -43.9 0-72.7 28.5-100.4 62.1 -28.5-34.1-56.7-62.1-101.4-62.1 -53.5 0-88.5 40.2-88.5 95.2 0 54.6 35.8 95.7 90.8 95.7C204.1 351.5 228.7 321.9 256.3 293zM115.5 256.8c0-21.3 13.9-44.5 39.3-44.5 26 0 52.7 25.9 70.4 45 -17.2 20.1-42.5 41.9-68.8 41.9C130.3 299.2 115.5 281.1 115.5 256.8zM287.3 257.3c18.4-19.9 41.2-45 68.3-45 26.4 0 41.4 20.8 41.4 44 0 23.4-13.7 43-39.8 43C329.2 299.2 305.7 278.5 287.3 257.3z"/></svg><!--[if lt IE 9]><em>500px</em><![endif]--></a></li> <li><a href="#" class="icon-3 behance" title="Behance"><svg viewBox="0 0 512 512"><path d="M254.8 171.8c6.4 8.9 9.6 19.6 9.6 32 0 12.8-3.2 23.1-9.7 30.9 -3.6 4.4-9 8.4-16 12 10.7 3.9 18.8 10.1 24.2 18.5 5.5 8.4 8.2 18.7 8.2 30.7 0 12.4-3.1 23.6-9.3 33.5 -4 6.6-8.9 12.1-14.9 16.5 -6.7 5.1-14.6 8.6-23.7 10.5 -9.1 1.9-19 2.8-29.6 2.8H99.1V149.5h101.4C226.1 149.8 244.2 157.3 254.8 171.8zM140.9 185.9v46.3h51c9.1 0 16.5-1.7 22.2-5.2 5.7-3.5 8.5-9.6 8.5-18.4 0-9.8-3.8-16.2-11.3-19.4 -6.5-2.2-14.7-3.3-24.8-3.3H140.9zM140.9 266.9v55.9h50.9c9.1 0 16.2-1.2 21.2-3.7 9.2-4.6 13.8-13.3 13.8-26.2 0-10.9-4.5-18.4-13.4-22.5 -5-2.3-12-3.5-21-3.6H140.9L140.9 266.9zM396.4 207.3c10.8 4.8 19.8 12.5 26.8 23 6.4 9.2 10.5 19.9 12.4 32.1 1.1 7.1 1.5 17.4 1.3 30.8H323.9c0.6 15.6 6 26.5 16.2 32.7 6.2 3.9 13.6 5.8 22.4 5.8 9.2 0 16.8-2.4 22.5-7.1 3.2-2.6 5.9-6.1 8.4-10.7h41.4c-1.1 9.2-6.1 18.5-15 28 -13.9 15.1-33.4 22.6-58.4 22.6 -20.6 0-38.9-6.4-54.6-19.1 -15.8-12.7-23.7-33.4-23.7-62.1 0-26.9 7.1-47.5 21.4-61.8 14.2-14.3 32.7-21.5 55.5-21.5C373.4 200 385.6 202.4 396.4 207.3zM335.7 242.3c-5.7 5.9-9.3 13.9-10.8 24h69.9c-0.7-10.8-4.3-18.9-10.8-24.5 -6.5-5.6-14.5-8.4-24.1-8.4C349.5 233.4 341.4 236.4 335.7 242.3zM402.8 161.5h-91.2V182.7h91.2V161.5z"/></svg><!--[if lt IE 9]><em>Behance</em><![endif]--></a></li> <li><a href="#" class="icon-4 codepen" title="CodePen"><svg viewBox="0 0 512 512"><path d="M427 201.9c-0.6-4.2-2.9-8-6.4-10.3L264.2 87.3c-4.9-3.3-11.4-3.3-16.3 0L91.4 191.6c-4 2.7-6.5 7.4-6.5 12.2v104.3c0 4.8 2.5 9.6 6.5 12.2l156.4 104.3c4.9 3.3 11.4 3.3 16.3 0L420.6 320.4c4-2.6 6.6-7.4 6.6-12.2V203.9C427.1 203.2 427.1 202.6 427 201.9 427 201.7 427.1 202.6 427 201.9zM270.7 127.1l115.2 76.8 -51.5 34.4 -63.8-42.7V127.1zM241.3 127.1v68.6l-63.8 42.7 -51.5-34.4L241.3 127.1zM114.3 231.4l36.8 24.6 -36.8 24.6V231.4zM241.3 384.9L126.1 308.1l51.5-34.4 63.8 42.6V384.9zM256 290.8l-52-34.8 52-34.8 52 34.8L256 290.8zM270.7 384.9V316.3l63.8-42.6 51.5 34.4L270.7 384.9zM397.7 280.6l-36.8-24.6 36.8-24.6V280.6z"/></svg><!--[if lt IE 9]><em>CodePen</em><![endif]--></a></li> <li><a href="#" class="icon-5 delicious" title="Delicious"><svg viewBox="0 0 512 512"><path d="M120 120v271.9h271.9V120H120zM365.6 365.6H256V256H146.4V146.4H256V256h109.6V365.6z"/></svg><!--[if lt IE 9]><em>Delicious</em><![endif]--></a></li> <li><a href="#" class="icon-6 deviantart" title="DeviantART"><svg viewBox="0 0 512 512"><path d="M251 214.4c66.8-1.2 102.7 20.7 111.4 63.3h-54.6v-45.8c-14.4-5-29.6-7.1-45.4-6.9v86.6h178.2c-8.6-69.1-88-123.3-184.6-123.3 -1.7 0-3.3 0-5 0.1v-31.7c-15.2-1-30.1 1.4-44.7 7.8v28.8c-73 14.8-127.8 61.5-134.9 118.4h179.6L251 214.4 251 214.4zM206.3 277.7H150.2c6-29.2 24.7-48.6 56.1-56.9V277.7z"/></svg><!--[if lt IE 9]><em>DeviantART</em><![endif]--></a></li> <li><a href="#" class="icon-7 dribbble" title="Dribbble"><svg viewBox="0 0 512 512"><path d="M256 68.4C152.4 68.4 68.4 152.4 68.4 256c0 103.6 84 187.6 187.6 187.6S443.6 359.6 443.6 256C443.6 152.4 359.6 68.4 256 68.4zM410.6 247.3c-40.3-6.6-77.3-7-111-1.1 -3.8-8.8-7.8-17.6-12-26.3 36.1-15.6 65.1-36.9 86.7-63.8C395.4 181 408.6 212.6 410.6 247.3zM350.5 133.4c-18.8 24.3-44.8 43.5-78 57.5 -15.9-29.1-34-57.5-54.5-85 12.2-3.1 24.9-4.9 38-4.9C291.6 101 324.3 113.2 350.5 133.4zM186.1 117.9c20.8 27.2 39.3 55.3 55.3 84.1 -38 11.2-83.4 16.9-135.8 17.3C116.4 175 146.3 138.1 186.1 117.9zM101 256c0-1.3 0.2-2.7 0.2-4 60.2-0.1 112.1-7 155.6-20.7 3.6 7.4 7.1 14.9 10.5 22.4 -52.8 16.5-96.4 50.4-130.3 101.3C114.5 328.2 101 293.6 101 256zM160.9 378.1c30.8-48.3 70.1-79.7 118.8-94.2 14.5 37.8 25.2 76.8 31.9 116.6 -17.3 6.7-36 10.5-55.6 10.5C220.1 411 187.2 398.6 160.9 378.1zM342 384.8c-6.9-36.8-16.9-72.8-30-107.8 29.3-4.1 61.6-3.1 96.9 3.1C402.1 323.6 377.2 361.3 342 384.8z"/></svg><!--[if lt IE 9]><em>Dribbble</em><![endif]--></a></li> <li><a href="#" class="icon-8 email" title="Email"><svg viewBox="0 0 512 512"><path d="M101.3 141.6v228.9h0.3 308.4 0.8V141.6H101.3zM375.7 167.8l-119.7 91.5 -119.6-91.5H375.7zM127.6 194.1l64.1 49.1 -64.1 64.1V194.1zM127.8 344.2l84.9-84.9 43.2 33.1 43-32.9 84.7 84.7L127.8 344.2 127.8 344.2zM384.4 307.8l-64.4-64.4 64.4-49.3V307.8z"/></svg><!--[if lt IE 9]><em>Email</em><![endif]--></a></li> <li><a href="#" class="icon-9 etsy" title="Etsy"><svg viewBox="0 0 512 512"><path d="M215.8 143.2c0-3.9 0.4-6.2 6.9-6.2h88.2c15.4 0 23.9 13.1 30 37.7l5 19.6h15c2.7-55.8 5-80.1 5-80.1s-37.7 4.2-60.1 4.2H193.1l-60.4-1.9v16.2l20.4 3.9c14.2 2.7 17.7 5.8 18.9 18.9 0 0 1.2 38.5 1.2 102s-1.2 101.6-1.2 101.6c0 11.6-4.6 15.8-18.9 18.5l-20.4 3.9v16.2l60.4-1.9h100.9c22.7 0 75.5 1.9 75.5 1.9 1.2-13.9 8.9-76.6 10-83.5h-14.2L350.1 348.4c-11.9 26.9-29.3 28.9-48.5 28.9h-57.4c-19.2 0-28.5-7.7-28.5-24.3v-87.8c0 0 42.7 0 56.6 1.2 10.8 0.8 17.3 3.9 20.8 18.9l4.6 20h16.6l-1.2-50.4 2.3-50.8h-16.6l-5.4 22.3c-3.5 14.6-5.8 17.3-20.8 18.9 -19.6 1.9-57 1.5-57 1.5V143.2z"/></svg><!--[if lt IE 9]><em>Etsy</em><![endif]--></a></li> <li><a href="#" class="icon-10 facebook" title="Facebook"><svg viewBox="0 0 512 512"><path d="M211.9 197.4h-36.7v59.9h36.7V433.1h70.5V256.5h49.2l5.2-59.1h-54.4c0 0 0-22.1 0-33.7 0-13.9 2.8-19.5 16.3-19.5 10.9 0 38.2 0 38.2 0V82.9c0 0-40.2 0-48.8 0 -52.5 0-76.1 23.1-76.1 67.3C211.9 188.8 211.9 197.4 211.9 197.4z"/></svg><!--[if lt IE 9]><em>Facebook</em><![endif]--></a></li> <li><a href="#" class="icon-11 flickr" title="Flickr"><svg viewBox="0 0 512 512"><path d="M344.5 156.9c-38.7 0-72.1 22.1-88.5 54.4 -16.4-32.3-49.8-54.4-88.5-54.4 -54.8 0-99.1 44.4-99.1 99.1 0 54.8 44.4 99.1 99.1 99.1 38.6 0 72.1-22.1 88.5-54.4 16.4 32.3 49.8 54.4 88.5 54.4 54.8 0 99.1-44.4 99.1-99.1C443.6 201.2 399.2 156.9 344.5 156.9zM344.5 328.7c-40.1 0-72.7-32.6-72.7-72.7s32.6-72.7 72.7-72.7 72.7 32.6 72.7 72.7C417.2 296.1 384.6 328.7 344.5 328.7z"/></svg><!--[if lt IE 9]><em>Flickr</em><![endif]--></a></li> <li><a href="#" class="icon-12 forrst" title="Forrst"><svg viewBox="0 0 512 512"><polygon points="241.582,329.145 206.922,303.748 214.591,293.279 241.582,313.057 241.582,258.318 272.223,258.318 272.223,293.564 299.038,278.939 305.252,290.332 272.223,308.35 272.223,329.049 322.979,303.016 328.902,314.563 272.223,343.635 272.223,395.852 392.273,395.852 256,68.147 119.727,395.852 241.582,395.852"/></svg><!--[if lt IE 9]><em>Forrst</em><![endif]--></a></li> <li><a href="#" class="icon-13 github" title="GitHub"><svg viewBox="0 0 512 512"><path d="M256 70.7c-102.6 0-185.9 83.2-185.9 185.9 0 82.1 53.3 151.8 127.1 176.4 9.3 1.7 12.3-4 12.3-8.9V389.4c-51.7 11.3-62.5-21.9-62.5-21.9 -8.4-21.5-20.6-27.2-20.6-27.2 -16.9-11.5 1.3-11.3 1.3-11.3 18.7 1.3 28.5 19.2 28.5 19.2 16.6 28.4 43.5 20.2 54.1 15.4 1.7-12 6.5-20.2 11.8-24.9 -41.3-4.7-84.7-20.6-84.7-91.9 0-20.3 7.3-36.9 19.2-49.9 -1.9-4.7-8.3-23.6 1.8-49.2 0 0 15.6-5 51.1 19.1 14.8-4.1 30.7-6.2 46.5-6.3 15.8 0.1 31.7 2.1 46.6 6.3 35.5-24 51.1-19.1 51.1-19.1 10.1 25.6 3.8 44.5 1.8 49.2 11.9 13 19.1 29.6 19.1 49.9 0 71.4-43.5 87.1-84.9 91.7 6.7 5.8 12.8 17.1 12.8 34.4 0 24.9 0 44.9 0 51 0 4.9 3 10.7 12.4 8.9 73.8-24.6 127-94.3 127-176.4C441.9 153.9 358.6 70.7 256 70.7z"/></svg><!--[if lt IE 9]><em>GitHub</em><![endif]--></a></li> <!-- New icon thanks to Jesse Wegner: --> <li><a href="#" class="icon-14 googleplus" title="GooglePlus"><svg viewBox="0 0 512 512"><path d="M179.7 237.6L179.7 284.2 256.7 284.2C253.6 304.2 233.4 342.9 179.7 342.9 133.4 342.9 95.6 304.4 95.6 257 95.6 209.6 133.4 171.1 179.7 171.1 206.1 171.1 223.7 182.4 233.8 192.1L270.6 156.6C247 134.4 216.4 121 179.7 121 104.7 121 44 181.8 44 257 44 332.2 104.7 393 179.7 393 258 393 310 337.8 310 260.1 310 251.2 309 244.4 307.9 237.6L179.7 237.6 179.7 237.6ZM468 236.7L429.3 236.7 429.3 198 390.7 198 390.7 236.7 352 236.7 352 275.3 390.7 275.3 390.7 314 429.3 314 429.3 275.3 468 275.3"/></svg><!--[if lt IE 9]><em>GooglePlus</em><![endif]--></a></li> <!-- old icon: <path d="M416.6 179.9h-41.5v41.5h-20.8v-41.5h-41.5v-20.8h41.5v-41.5h20.8v41.5h41.5V179.9zM299.2 351.6c0 31.1-28.4 69-99.9 69 -52.3 0-95.9-22.5-95.9-60.5 0-29.3 18.5-67.3 105.1-67.3 -12.9-10.5-16-25.1-8.2-41 -50.7 0-76.7-29.8-76.7-67.7 0-37 27.5-70.7 83.7-70.7 14.2 0 90 0 90 0l-20.1 21.1h-23.6c16.7 9.5 25.5 29.2 25.5 50.9 0 19.9-11 36-26.6 48.1 -27.7 21.4-20.6 33.4 8.4 54.6C289.7 309.6 299.2 326.2 299.2 351.6zM243.1 186.8c-4.2-31.8-24.9-58-49.2-58.7 -24.3-0.7-40.5 23.7-36.3 55.5 4.2 31.8 27.2 54.1 51.5 54.8C233.3 239.1 247.3 218.6 243.1 186.8zM268.1 354.8c0-26.2-23.9-51.2-64-51.2 -36.1-0.4-66.8 22.8-66.8 49.8 0 27.5 26.1 50.4 62.2 50.4C245.8 403.7 268.1 382.2 268.1 354.8z"/> --> <!-- old icon: <li><a href="#" class="icon-15 instagram" title="Instagram"><svg viewBox="0 0 512 512"><path d="M365.3 234.1h-24.7c1.8 7 2.9 14.3 2.9 21.9 0 48.3-39.2 87.5-87.5 87.5 -48.3 0-87.5-39.2-87.5-87.5 0-7.6 1.1-14.9 2.9-21.9h-24.7V354.4c0 6 4.9 10.9 10.9 10.9H354.4c6 0 10.9-4.9 10.9-10.9V234.1H365.3zM365.3 157.6c0-6-4.9-10.9-10.9-10.9h-32.8c-6 0-10.9 4.9-10.9 10.9v32.8c0 6 4.9 10.9 10.9 10.9h32.8c6 0 10.9-4.9 10.9-10.9V157.6zM256 201.3c-30.2 0-54.7 24.5-54.7 54.7 0 30.2 24.5 54.7 54.7 54.7 30.2 0 54.7-24.5 54.7-54.7C310.7 225.8 286.2 201.3 256 201.3M365.3 398.1H146.7c-18.1 0-32.8-14.7-32.8-32.8V146.7c0-18.1 14.7-32.8 32.8-32.8h218.7c18.1 0 32.8 14.7 32.8 32.8v218.7C398.1 383.4 383.5 398.1 365.3 398.1"/></svg></a></li> --> <!-- New icon thanks to Justin Paul Veiga: --> <li><a href="#" class="icon-15 instagram" title="Instagram"><svg viewBox="0 0 512 512"><g><path d="M256 109.3c47.8 0 53.4 0.2 72.3 1 17.4 0.8 26.9 3.7 33.2 6.2 8.4 3.2 14.3 7.1 20.6 13.4 6.3 6.3 10.1 12.2 13.4 20.6 2.5 6.3 5.4 15.8 6.2 33.2 0.9 18.9 1 24.5 1 72.3s-0.2 53.4-1 72.3c-0.8 17.4-3.7 26.9-6.2 33.2 -3.2 8.4-7.1 14.3-13.4 20.6 -6.3 6.3-12.2 10.1-20.6 13.4 -6.3 2.5-15.8 5.4-33.2 6.2 -18.9 0.9-24.5 1-72.3 1s-53.4-0.2-72.3-1c-17.4-0.8-26.9-3.7-33.2-6.2 -8.4-3.2-14.3-7.1-20.6-13.4 -6.3-6.3-10.1-12.2-13.4-20.6 -2.5-6.3-5.4-15.8-6.2-33.2 -0.9-18.9-1-24.5-1-72.3s0.2-53.4 1-72.3c0.8-17.4 3.7-26.9 6.2-33.2 3.2-8.4 7.1-14.3 13.4-20.6 6.3-6.3 12.2-10.1 20.6-13.4 6.3-2.5 15.8-5.4 33.2-6.2C202.6 109.5 208.2 109.3 256 109.3M256 77.1c-48.6 0-54.7 0.2-73.8 1.1 -19 0.9-32.1 3.9-43.4 8.3 -11.8 4.6-21.7 10.7-31.7 20.6 -9.9 9.9-16.1 19.9-20.6 31.7 -4.4 11.4-7.4 24.4-8.3 43.4 -0.9 19.1-1.1 25.2-1.1 73.8 0 48.6 0.2 54.7 1.1 73.8 0.9 19 3.9 32.1 8.3 43.4 4.6 11.8 10.7 21.7 20.6 31.7 9.9 9.9 19.9 16.1 31.7 20.6 11.4 4.4 24.4 7.4 43.4 8.3 19.1 0.9 25.2 1.1 73.8 1.1s54.7-0.2 73.8-1.1c19-0.9 32.1-3.9 43.4-8.3 11.8-4.6 21.7-10.7 31.7-20.6 9.9-9.9 16.1-19.9 20.6-31.7 4.4-11.4 7.4-24.4 8.3-43.4 0.9-19.1 1.1-25.2 1.1-73.8s-0.2-54.7-1.1-73.8c-0.9-19-3.9-32.1-8.3-43.4 -4.6-11.8-10.7-21.7-20.6-31.7 -9.9-9.9-19.9-16.1-31.7-20.6 -11.4-4.4-24.4-7.4-43.4-8.3C310.7 77.3 304.6 77.1 256 77.1L256 77.1z"/><path d="M256 164.1c-50.7 0-91.9 41.1-91.9 91.9s41.1 91.9 91.9 91.9 91.9-41.1 91.9-91.9S306.7 164.1 256 164.1zM256 315.6c-32.9 0-59.6-26.7-59.6-59.6s26.7-59.6 59.6-59.6 59.6 26.7 59.6 59.6S288.9 315.6 256 315.6z"/><circle cx="351.5" cy="160.5" r="21.5"/></g></svg><!--[if lt IE 9]><em>Instagram</em><![endif]--></a></li> <li><a href="#" class="icon-16 lastfm" title="Last.fm"><svg viewBox="0 0 512 512"><path d="M230.104 336.568l-13.607-36.988c0 0-22.11 24.66-55.268 24.66 -29.341 0-50.172-25.512-50.172-66.328 0-52.293 26.359-71.001 52.297-71.001 37.412 0 49.316 24.234 59.522 55.273l13.607 42.518c13.603 41.236 39.113 74.402 112.666 74.402 52.727 0 88.437-16.155 88.437-58.672 0-34.438-19.56-52.297-56.125-60.802l-27.209-5.951c-18.707-4.252-24.233-11.906-24.233-24.659 0-14.456 11.478-22.96 30.189-22.96 20.406 0 31.458 7.653 33.162 25.935l42.516-5.103c-3.402-38.263-29.761-53.996-73.127-53.996 -38.266 0-75.68 14.456-75.68 60.799 0 28.912 14.029 47.197 49.315 55.697l28.916 6.801c21.683 5.104 28.908 14.031 28.908 26.363 0 15.73-15.305 22.107-44.218 22.107 -42.941 0-60.794-22.534-70.999-53.574l-14.032-42.513c-17.854-55.271-46.342-75.68-102.892-75.68 -62.499-0.001-95.663 39.538-95.663 106.715 0 64.628 33.164 99.489 92.689 99.489C207.141 359.1 230.104 336.568 230.104 336.568L230.104 336.568z"/></svg><!--[if lt IE 9]><em>Last.fm</em><![endif]--></a></li> <li><a href="#" class="icon-17 linkedin" title="LinkedIn"><svg viewBox="0 0 512 512"><path d="M186.4 142.4c0 19-15.3 34.5-34.2 34.5 -18.9 0-34.2-15.4-34.2-34.5 0-19 15.3-34.5 34.2-34.5C171.1 107.9 186.4 123.4 186.4 142.4zM181.4 201.3h-57.8V388.1h57.8V201.3zM273.8 201.3h-55.4V388.1h55.4c0 0 0-69.3 0-98 0-26.3 12.1-41.9 35.2-41.9 21.3 0 31.5 15 31.5 41.9 0 26.9 0 98 0 98h57.5c0 0 0-68.2 0-118.3 0-50-28.3-74.2-68-74.2 -39.6 0-56.3 30.9-56.3 30.9v-25.2H273.8z"/></svg><!--[if lt IE 9]><em>LinkedIn</em><![endif]--></a></li> <li><a href="#" class="icon-18 myspace" title="MySpace"><svg viewBox="0 0 512 512"><polygon points="437.692,309.414 74.308,309.414 74.308,214.586 119.699,214.586 119.699,264.021 392.301,264.021 392.301,214.586 437.692,214.586"/></svg><!--[if lt IE 9]><em>MySpace</em><![endif]--></a></li> <li><a href="#" class="icon-19 paypal" title="PayPal"><svg viewBox="0 0 512 512"><path d="M374.6 173.4c0 61.3-54 109.9-145.6 109.9h-26.7l-20.5 89.6h-64.3l62.8-283h106.6C343.5 89.8 374.6 125.5 374.6 173.4zM307.1 175.2c0-25.7-21.2-32.5-45.8-32.5h-28.4l-18.8 84.8h25.3C276.1 227.5 307.1 213 307.1 175.2zM393.1 161.4c12.2 95.9-78.6 145.2-173.4 143.8l-20.7 88.1h-44.6l-5 22.8h68.8l19.9-87.9C376.8 324 430.1 222.9 393.1 161.4z"/></svg><!--[if lt IE 9]><em>PayPal</em><![endif]--></a></li> <li><a href="#" class="icon-20 pinterest" title="Pinterest"><svg viewBox="0 0 512 512"><path d="M266.6 76.5c-100.2 0-150.7 71.8-150.7 131.7 0 36.3 13.7 68.5 43.2 80.6 4.8 2 9.2 0.1 10.6-5.3 1-3.7 3.3-13 4.3-16.9 1.4-5.3 0.9-7.1-3-11.8 -8.5-10-13.9-23-13.9-41.3 0-53.3 39.9-101 103.8-101 56.6 0 87.7 34.6 87.7 80.8 0 60.8-26.9 112.1-66.8 112.1 -22.1 0-38.6-18.2-33.3-40.6 6.3-26.7 18.6-55.5 18.6-74.8 0-17.3-9.3-31.7-28.4-31.7 -22.5 0-40.7 23.3-40.7 54.6 0 19.9 6.7 33.4 6.7 33.4s-23.1 97.8-27.1 114.9c-8.1 34.1-1.2 75.9-0.6 80.1 0.3 2.5 3.6 3.1 5 1.2 2.1-2.7 28.9-35.9 38.1-69 2.6-9.4 14.8-58 14.8-58 7.3 14 28.7 26.3 51.5 26.3 67.8 0 113.8-61.8 113.8-144.5C400.1 134.7 347.1 76.5 266.6 76.5z"/></svg><!--[if lt IE 9]><em>Pinterest</em><![endif]--></a></li> <li><a href="#" class="icon-21 rss" title="RSS"><svg viewBox="0 0 512 512"><path d="M201.8 347.2c0 20.3-16.5 36.8-36.8 36.8 -20.3 0-36.8-16.5-36.8-36.8s16.5-36.8 36.8-36.8C185.3 310.4 201.8 326.8 201.8 347.2zM128.2 204.7v54.5c68.5 0.7 124 56.3 124.7 124.7h54.5C306.7 285.3 226.9 205.4 128.2 204.7zM128.2 166.6c57.9 0.3 112.3 22.9 153.2 63.9 41 41 63.7 95.5 63.9 153.5h54.5c-0.3-149.9-121.7-271.4-271.6-271.9V166.6L128.2 166.6z"/></svg><!--[if lt IE 9]><em>RSS</em><![endif]--></a></li> <li><a href="#" class="icon-22 soundcloud" title="SoundCloud"><svg viewBox="0 0 512 512"><path d="M443.5 273.1c0 25.1-20.4 45.5-45.5 45.5H271.5V162.3c4.8-1.8 9.9-3.1 15.1-3.9 4.1-0.6 8.3-1 12.5-1 42.3 0 77 32.7 80.3 74.1 5.7-2.5 11.9-4 18.6-4C423.1 227.6 443.5 248 443.5 273.1zM224.2 193.2v125.4h15.1v-134.5c-3.4 3.7-6.4 7.8-9 12.1C228.4 195 226.3 194.1 224.2 193.2zM247.6 318.6h15.1v-152.4c-5.4 2.7-10.5 6.1-15.1 9.9V318.6zM151.8 208.9v109.7h15.1V196.9C161.3 200.2 156.2 204.2 151.8 208.9zM106.5 231.6v86.5c1.9 0.2 3.7 0.4 5.7 0.4h7.9v-86.6c-2.6-0.5-5.2-0.7-7.9-0.7C110.3 231.3 108.4 231.4 106.5 231.6zM86.5 310.2c3.4 2.5 7.2 4.5 11.3 5.9v-82.4c-4.1 1.4-7.9 3.4-11.3 5.9V310.2zM128.4 234.4v84.2h15.1v-98.7c-3.4 5.6-6 11.8-7.5 18.4C133.6 236.8 131.1 235.5 128.4 234.4zM175.9 318.6h15.1V188.8c-5.3 0.7-10.3 2-15.1 3.8V318.6zM200.1 318.6h15.1v-128.3c-4.8-1.2-9.9-1.9-15.1-1.9V318.6L200.1 318.6zM79.1 303.4v-56.9c-6.6 7.6-10.6 17.6-10.6 28.5C68.5 285.8 72.5 295.7 79.1 303.4z"/></svg><!--[if lt IE 9]><em>SoundCloud</em><![endif]--></a></li> <li><a href="#" class="icon-23 stackoverflow" title="StackOverflow"><svg viewBox="0 0 512 512"><path d="M294.8 361.2l-122 0.1 0-26 122-0.1L294.8 361.2zM377.2 213.7L356.4 93.5l-25.7 4.5 20.9 120.2L377.2 213.7zM297.8 301.8l-121.4-11.2 -2.4 25.9 121.4 11.2L297.8 301.8zM305.8 267.8l-117.8-31.7 -6.8 25.2 117.8 31.7L305.8 267.8zM321.2 238l-105-62 -13.2 22.4 105 62L321.2 238zM346.9 219.7l-68.7-100.8 -21.5 14.7 68.7 100.8L346.9 219.7zM315.5 275.5v106.5H155.6V275.5h-20.8v126.9h201.5V275.5H315.5z"/></svg><!--[if lt IE 9]><em>StackOverflow</em><![endif]--></a></li> <li><a href="#" class="icon-24 stumbleupon" title="StumbleUpon"><svg viewBox="0 0 512 512"><path d="M274.5 216.4l23.1 12.8 36.5-12.3v-24.7c0-42.7-35.7-75.9-78.1-75.9 -42.3 0-78.1 31.1-78.1 75.4 0 44.4 0 113.1 0 113.1 0 10.2-8.3 18.5-18.5 18.5 -10.2 0-18.5-8.3-18.5-18.5v-47.9H80.9c0 0 0 48 0 48.6 0 43.2 35 78.3 78.3 78.3 42.9 0 77.7-34.4 78.3-77.2v-111.7c0-10.2 8.3-18.5 18.5-18.5 10.2 0 18.5 8.3 18.5 18.5L274.5 216.4 274.5 216.4zM371.2 256.9v50.2c0 10.2-8.3 18.5-18.5 18.5 -10.2 0-18.5-8.3-18.5-18.5v-49.2l-36.5 12.4 -23.1-12.8v48.8c0.4 42.9 35.3 77.6 78.3 77.6 43.2 0 78.3-35 78.3-78.3 0-0.6 0-48.6 0-48.6L371.2 256.9 371.2 256.9z"/></svg><!--[if lt IE 9]><em>StumbleUpon</em><![endif]--></a></li> <li><a href="#" class="icon-25 tumblr" title="Tumblr"><svg viewBox="0 0 512 512"><path d="M210.8 80.3c-2.3 18.3-6.4 33.4-12.4 45.2 -6 11.9-13.9 22-23.9 30.5 -9.9 8.5-21.8 14.9-35.7 19.5v50.6h38.9v124.5c0 16.2 1.7 28.6 5.1 37.1 3.4 8.5 9.5 16.6 18.3 24.2 8.8 7.6 19.4 13.4 31.9 17.5 12.5 4.1 26.8 6.1 43 6.1 14.3 0 27.6-1.4 39.9-4.3 12.3-2.9 26-7.9 41.2-15v-55.9c-17.8 11.7-35.7 17.5-53.7 17.5 -10.1 0-19.1-2.4-27-7.1 -5.9-3.5-10-8.2-12.2-14 -2.2-5.8-3.3-19.1-3.3-39.7v-91.1H345.5v-55.8h-84.4v-90H210.8z"/></svg><!--[if lt IE 9]><em>Tumblr</em><![endif]--></a></li> <li><a href="#" class="icon-26 twitter" title="Twitter"><svg viewBox="0 0 512 512"><path d="M419.6 168.6c-11.7 5.2-24.2 8.7-37.4 10.2 13.4-8.1 23.8-20.8 28.6-36 -12.6 7.5-26.5 12.9-41.3 15.8 -11.9-12.6-28.8-20.6-47.5-20.6 -42 0-72.9 39.2-63.4 79.9 -54.1-2.7-102.1-28.6-134.2-68 -17 29.2-8.8 67.5 20.1 86.9 -10.7-0.3-20.7-3.3-29.5-8.1 -0.7 30.2 20.9 58.4 52.2 64.6 -9.2 2.5-19.2 3.1-29.4 1.1 8.3 25.9 32.3 44.7 60.8 45.2 -27.4 21.4-61.8 31-96.4 27 28.8 18.5 63 29.2 99.8 29.2 120.8 0 189.1-102.1 185-193.6C399.9 193.1 410.9 181.7 419.6 168.6z"/></svg><!--[if lt IE 9]><em>Twitter</em><![endif]--></a></li> <li><a href="#" class="icon-27 vimeo" title="Vimeo"><svg viewBox="0 0 512 512"><path d="M420.1 197.9c-1.5 33.6-25 79.5-70.3 137.8 -46.9 60.9-86.5 91.4-118.9 91.4 -20.1 0-37.1-18.5-51-55.6 -9.3-34-18.5-68-27.8-102 -10.3-37.1-21.4-55.7-33.2-55.7 -2.6 0-11.6 5.4-27 16.2L75.7 209.1c17-14.9 33.8-29.9 50.3-44.9 22.7-19.6 39.7-29.9 51.1-31 26.8-2.6 43.3 15.8 49.5 55 6.7 42.4 11.3 68.7 13.9 79 7.7 35.1 16.2 52.7 25.5 52.7 7.2 0 18-11.4 32.5-34.2 14.4-22.8 22.2-40.1 23.2-52.1 2.1-19.7-5.7-29.5-23.2-29.5 -8.3 0-16.8 1.9-25.5 5.7 16.9-55.5 49.3-82.4 97.1-80.9C405.5 130 422.2 153 420.1 197.9z"/></svg><!--[if lt IE 9]><em>Vimeo</em><![endif]--></a></li> <li><a href="#" class="icon-28 youtube" title="YouTube"><svg viewBox="0 0 512 512"><path d="M422.6 193.6c-5.3-45.3-23.3-51.6-59-54 -50.8-3.5-164.3-3.5-215.1 0 -35.7 2.4-53.7 8.7-59 54 -4 33.6-4 91.1 0 124.8 5.3 45.3 23.3 51.6 59 54 50.9 3.5 164.3 3.5 215.1 0 35.7-2.4 53.7-8.7 59-54C426.6 284.8 426.6 227.3 422.6 193.6zM222.2 303.4v-94.6l90.7 47.3L222.2 303.4z"/></svg><!--[if lt IE 9]><em>YouTube</em><![endif]--></a></li> <!-- Thanks to codepen.io/mrjustin for the yelp and foursquare icons below: --> <li><a href="#" class="icon-29 yelp" title="Yelp"><svg viewBox="0 0 512 512"><path d="M284.1 298.4c-6.1 6.1-0.9 17.3-0.9 17.3l45.8 76.4c0 0 7.5 10.1 14 10.1 6.5 0 13-5.4 13-5.4l36.2-51.7c0 0 3.6-6.5 3.7-12.2 0.1-8.1-12.1-10.4-12.1-10.4l-85.7-27.5C298.1 294.9 289.7 292.7 284.1 298.4L284.1 298.4zM279.7 259.8c4.4 7.4 16.5 5.3 16.5 5.3l85.5-25c0 0 11.6-4.7 13.3-11.1 1.6-6.3-1.9-13.9-1.9-13.9L352.2 167c0 0-3.5-6.1-10.9-6.7 -8.1-0.7-13.1 9.1-13.1 9.1l-48.3 76C280 245.4 275.7 253 279.7 259.8L279.7 259.8zM239.4 230.2c10.1-2.5 11.7-17.1 11.7-17.1l-0.7-121.7c0 0-1.5-15-8.3-19.1 -10.6-6.4-13.7-3.1-16.7-2.6l-71 26.4c0 0-6.9 2.3-10.6 8.1 -5.2 8.2 5.3 20.2 5.3 20.2L222.8 225C222.8 225 230.1 232.5 239.4 230.2L239.4 230.2zM221.8 279.5c0.3-9.4-11.3-15-11.3-15l-76.3-38.5c0 0-11.3-4.7-16.8-1.4 -4.2 2.5-7.9 7-8.3 11l-5 61.2c0 0-0.7 10.6 2 15.4 3.9 6.8 16.7 2.1 16.7 2.1l89.1-19.7C215.4 292.1 221.5 291.9 221.8 279.5L221.8 279.5zM244 312.5c-7.6-3.9-16.8 4.2-16.8 4.2l-59.6 65.6c0 0-7.4 10-5.5 16.2 1.8 5.8 4.7 8.6 8.9 10.7l59.9 18.9c0 0 7.3 1.5 12.8-0.1 7.8-2.3 6.4-14.5 6.4-14.5l1.4-88.9C251.3 324.6 251 316.1 244 312.5L244 312.5zM244 312.5"/></svg><!--[if lt IE 9]><em>Yelp</em><![endif]--></a></li> <li><a href="#" class="icon-30 foursquare" title="Foursquare"><svg viewBox="0 0 512 512"><path d="M347.7,83.6c0,0-158.1,0-183.4,0c-25.3,0-32.8,19-32.8,31c0,12,0,291.4,0,291.4c0,13.5,7.3,18.5,11.3,20.2 c4.1,1.7,15.3,3,22.1-4.7c0,0,86.6-100.5,88.1-102c2.2-2.2,2.2-2.2,4.5-2.2c4.5,0,37.9,0,56,0c23.5,0,27.3-16.8,29.8-26.7 c2-8.3,25-125.9,32.7-163.2C381.9,99,374.7,83.6,347.7,83.6z M343.4,290.6c2-8.3,25-125.9,32.7-163.2 M336.9,133.3l-7.7,40.1 c-0.9,4.3-6.4,8.9-11.4,8.9c-5.1,0-71.4,0-71.4,0c-8,0-13.8,5.5-13.8,13.5v8.7c0,8,5.8,13.7,13.8,13.7c0,0,54.9,0,60.6,0 c5.7,0,11.2,6.2,10,12.3c-1.2,6.1-7,36.1-7.7,39.5c-0.7,3.3-4.5,9-11.2,9c-5.7,0-49.5,0-49.5,0c-9,0-11.7,1.2-17.8,8.7 c-6,7.5-60.2,72.6-60.2,72.6c-0.5,0.6-1.1,0.4-1.1-0.2V132.7c0-5.1,4.5-11.1,11.1-11.1c0,0,141.4,0,147.2,0 C333.2,121.5,338.3,126.6,336.9,133.3z"/></svg><!--[if lt IE 9]><em>Foursquare</em><![endif]--></a></li> </ul>
CSS
html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } html { background: #0e1a25; font-size: 0.625em; } .soc { display: block; font-size: 0; list-style: none; margin: 0; padding: 48px; padding: 4.8rem; text-align: center; } .soc li { display: inline-block; margin: 12px; margin: 1.2rem; } .soc a, .soc svg { display: block; } .soc a { position: relative; height: 96px; height: 9.6rem; width: 96px; width: 9.6rem; } .soc svg { height: 100%; width: 100%; } .soc em { font-size: 14px; line-height: 1.5; margin-top: -0.75em; position: absolute; text-align: center; top: 50%; right: 0; bottom: 0; left: 0; } .icon-1:hover, .icon-2:hover, .icon-3:hover, .icon-4:hover, .icon-5:hover, .icon-6:hover, .icon-7:hover, .icon-8:hover, .icon-9:hover, .icon-10:hover, .icon-11:hover, .icon-12:hover, .icon-13:hover, .icon-14:hover, .icon-15:hover, .icon-16:hover, .icon-17:hover, .icon-18:hover, .icon-19:hover, .icon-20:hover, .icon-21:hover, .icon-22:hover, .icon-23:hover, .icon-24:hover, .icon-25:hover, .icon-26:hover, .icon-27:hover, .icon-28:hover, .icon-29:hover, .icon-30:hover { border-radius: 100%; color: #0e1a25; fill: #0e1a25; -webkit-transform: scale(1.25); transform: scale(1.25); -webkit-transition: background-color 0.5s, -webkit-transform 0.5s ease-out; transition: background-color 0.5s, -webkit-transform 0.5s ease-out; transition: background-color 0.5s, transform 0.5s ease-out; transition: background-color 0.5s, transform 0.5s ease-out, -webkit-transform 0.5s ease-out; } .icon-1 { color: #d94a26; fill: #d94a26; } .icon-1:hover { background: #d94a26; } .icon-2 { color: #d96e26; fill: #d96e26; } .icon-2:hover { background: #d96e26; } .icon-3 { color: #d99126; fill: #d99126; } .icon-3:hover { background: #d99126; } .icon-4 { color: #d9b526; fill: #d9b526; } .icon-4:hover { background: #d9b526; } .icon-5 { color: #d9d926; fill: #d9d926; } .icon-5:hover { background: #d9d926; } .icon-6 { color: #b5d926; fill: #b5d926; } .icon-6:hover { background: #b5d926; } .icon-7 { color: #91d926; fill: #91d926; } .icon-7:hover { background: #91d926; } .icon-8 { color: #6ed926; fill: #6ed926; } .icon-8:hover { background: #6ed926; } .icon-9 { color: #4ad926; fill: #4ad926; } .icon-9:hover { background: #4ad926; } .icon-10 { color: #26d926; fill: #26d926; } .icon-10:hover { background: #26d926; } .icon-11 { color: #26d94a; fill: #26d94a; } .icon-11:hover { background: #26d94a; } .icon-12 { color: #26d96e; fill: #26d96e; } .icon-12:hover { background: #26d96e; } .icon-13 { color: #26d991; fill: #26d991; } .icon-13:hover { background: #26d991; } .icon-14 { color: #26d9b5; fill: #26d9b5; } .icon-14:hover { background: #26d9b5; } .icon-15 { color: #26d9d9; fill: #26d9d9; } .icon-15:hover { background: #26d9d9; } .icon-16 { color: #26b5d9; fill: #26b5d9; } .icon-16:hover { background: #26b5d9; } .icon-17 { color: #2691d9; fill: #2691d9; } .icon-17:hover { background: #2691d9; } .icon-18 { color: #266ed9; fill: #266ed9; } .icon-18:hover { background: #266ed9; } .icon-19 { color: #264ad9; fill: #264ad9; } .icon-19:hover { background: #264ad9; } .icon-20 { color: #2626d9; fill: #2626d9; } .icon-20:hover { background: #2626d9; } .icon-21 { color: #4a26d9; fill: #4a26d9; } .icon-21:hover { background: #4a26d9; } .icon-22 { color: #6e26d9; fill: #6e26d9; } .icon-22:hover { background: #6e26d9; } .icon-23 { color: #9126d9; fill: #9126d9; } .icon-23:hover { background: #9126d9; } .icon-24 { color: #b526d9; fill: #b526d9; } .icon-24:hover { background: #b526d9; } .icon-25 { color: #d926d9; fill: #d926d9; } .icon-25:hover { background: #d926d9; } .icon-26 { color: #d926b5; fill: #d926b5; } .icon-26:hover { background: #d926b5; } .icon-27 { color: #d92691; fill: #d92691; } .icon-27:hover { background: #d92691; } .icon-28 { color: #d9266e; fill: #d9266e; } .icon-28:hover { background: #d9266e; } .icon-29 { color: #d9264a; fill: #d9264a; } .icon-29:hover { background: #d9264a; } .icon-30 { color: #d92626; fill: #d92626; } .icon-30:hover { background: #d92626; }
JAVASCRIPT
Expand for more options Login