<html>
  <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
      <link href="https://file.myfontastic.com/n6vo44Re5QaWo8oCKShBs7/icons.css" rel="stylesheet">
    <title></title>
  </head>
  <body class="spinner-body">
    <ul class="soc-list">
        <li><a href="/"><i class="socicon-facebook"></i></a></li>
        <li><a href="/"><i class="socicon-twitter"></i></a></li>
        <li><a href="/"><i class="socicon-linkedin"></i></a></li>
        <li><a href="/"><i class="socicon-instagram"></i></a></li>
    </ul>
  </body>
</html>
        @media all and (-webkit-min-device-pixel-ratio: 0) {
          .soc-list {
            display: table;
            width: 100%;
          }
        }

        .soc-list {
          list-style: none;
          padding: 0;
          word-spacing: -0.36em;
          text-align: center;
        }

        .soc-list li {
          word-spacing: normal;
          display: inline-block;
          vertical-align: top;
          padding: 0;
          margin: 0 0 0 -26px;
          width: 52px;
          height: 52px;

        }

        .soc-list li:hover {

        }

        .soc-list li:nth-child(2n) {
          margin-top: 26px;
        }

        .soc-list a {
          color:#fff;
          background: #e2e2e2;
          position: relative;
          display: block;
          width: 34px;
          height: 34px;
          left:9px;
          top:9px;
          -webkit-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          transform: rotate(45deg);
          -webkit-backface-visibility: hidden;

          -webkit-transition: -webkit-transform .5s;
          -moz-transition: -moz-transform .5s;
          -ms-transition: -ms-transform .5s;
          -o-transition: -o-transform .5s;
          transition: transform .5s;

        }

        .soc-list a:hover {
          background: #b29f87;

          -webkit-transform: rotate(405deg);
          -ms-transform: rotate(405deg);
          transform: rotate(405deg);

        }

        .soc-list i {
          font-size: 16px;
          position: absolute;
          top: 50%;
          left: 50%;
          margin: -8px 0 0 -8px;
          -webkit-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
        }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.