SVG Social Media Icon With Sass CSS
First use:
CSS Base: Normalize ( https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css ) and
Vendor Prefixing: Autoprefixer ( <script src="https://rawgit.com/ai/autoprefixer-rails/master/vendor/autoprefixer.js" crossorigin="anonymous">
</script>
<script>window.autoprefixer || document.write('<script src="/autoprefixer.js">\x3C/script>')</script> )
SASS CSS
CSS Base: Normalize ( https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css ) and
Vendor Prefixing: Autoprefixer ( <script src="https://rawgit.com/ai/autoprefixer-rails/master/vendor/autoprefixer.js" crossorigin="anonymous">
</script>
<script>window.autoprefixer || document.write('<script src="/autoprefixer.js">\x3C/script>')</script> )
SASS CSS
// Thanks to codepen.io/alaingalvan for suggesting this color variable:
$background: hsl(210, 45, 10)
// http://www.paulirish.com/2012/box-sizing-border-box-ftw/
html
box-sizing: border-box
*, *:before, *:after
box-sizing: inherit
html
background: $background
font-size: .625em // 10px for rems
.soc
display: block
font-size: 0
list-style: none
margin: 0
padding: 48px // IE8
padding: 4.8rem
text-align: center
li
display: inline-block
margin: 12px // IE8
margin: 1.2rem
a, svg
display: block
a
position: relative // IE8
height: 96px // IE8
height: 9.6rem
width: 96px // IE8
width: 9.6rem
svg
height: 100%
width: 100%
// IE8:
em
font-size: 14px
line-height: 1.5
margin-top: -.75em
position: absolute
text-align: center
top: 50%
right: 0
bottom: 0
left: 0
// Using placeholder selectors and @extend (keeps output CSS lean) instead of [class*='icon-'] attribute selector because IE8 doesn't support it :<
%social-icon-hover
border-radius: 100%
color: $background // IE8
fill: $background
transform: scale(1.25)
transition: background-color .5s, transform .5s ease-out
// Neat color trick, <3 Sass
@for $i from 1 through 30
.icon-#{$i}
color: hsl($i * 12, 70, 50) // IE8
fill: hsl($i * 12, 70, 50)
&:hover
background: hsl($i * 12, 70, 50)
@extend %social-icon-hover
HTML
<!-- Thanks to codepen.io/brav0 for pointing out that AdBlock Plus blocks the old "social-icons" class: -->
<ul class="soc">
<li><a rel="nofollow" rel="noreferrer"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 rel="nofollow" rel="noreferrer"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 rel="nofollow" rel="noreferrer"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 rel="nofollow" rel="noreferrer"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 rel="nofollow" rel="noreferrer"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 rel="nofollow" rel="noreferrer"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 rel="nofollow" rel="noreferrer"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 rel="nofollow" rel="noreferrer"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 rel="nofollow" rel="noreferrer"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 rel="nofollow" rel="noreferrer"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 rel="nofollow" rel="noreferrer"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 rel="nofollow" rel="noreferrer"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 rel="nofollow" rel="noreferrer"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 rel="nofollow" rel="noreferrer"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 rel="nofollow" rel="noreferrer"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 rel="nofollow" rel="noreferrer"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 rel="nofollow" rel="noreferrer"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 rel="nofollow" rel="noreferrer"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 rel="nofollow" rel="noreferrer"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 rel="nofollow" rel="noreferrer"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 rel="nofollow" rel="noreferrer"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 rel="nofollow" rel="noreferrer"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 rel="nofollow" rel="noreferrer"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 rel="nofollow" rel="noreferrer"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 rel="nofollow" rel="noreferrer"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 rel="nofollow" rel="noreferrer"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 rel="nofollow" rel="noreferrer"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 rel="nofollow" rel="noreferrer"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 rel="nofollow" rel="noreferrer"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 rel="nofollow" rel="noreferrer"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 rel="nofollow" rel="noreferrer"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>
Comments
Post a Comment
Bila Ada posting yang kurang, atau error atau yang lainnya, silahkan tinggalkan komentar agar artikel/post di perbaiki.
Jangan Lupa Cek Box "Notify Me" agar tahu komentar kamu dibalas oleh saya.
If there are any posts that are missing, or error or anything else, please leave a comment for the article / post to be fixed.
Do not Forget Check Box "Notify Me" to know our comments replied by me.