Social Icons Round

Prototype

Notes
Info
HTML
View
Context

No notes defined.

Handle: @social-icons-round
Preview:
- With layout
- Component only
Filesystem Path: components/02-components/social-icons/social-icons-round.hbs


        
        <div class="h-screen p-6 bg-gray-600">

    <!-- Icons using Entypo -->
    <ul class="flex text-4xl">
        <li class="mr-2">
            <a class="text-gray-100 transition duration-100 opacity-50 hover:text-white hover:opacity-100" href="https://www.facebook.com/username" title="Facebook" target="_blank" rel="noopener" onclick="ga('send','event','Social','Click - Facebook','https://www.facebook.com/username')">

                <svg class="h-12 w-12 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                    <path d="M10 .4C4.698.4.4 4.698.4 10s4.298 9.6 9.6 9.6 9.6-4.298 9.6-9.6S15.302.4 10 .4zm2.274 6.634h-1.443c-.171 0-.361.225-.361.524V8.6h1.805l-.273 1.486H10.47v4.461H8.767v-4.461H7.222V8.6h1.545v-.874c0-1.254.87-2.273 2.064-2.273h1.443v1.581z" />
                </svg>

            </a>
        </li>
        <li class="mr-2">
            <a class="text-gray-100 transition duration-100 opacity-50 hover:text-white hover:opacity-100" href="https://twitter.com/username" title="Twitter" target="_blank" rel="noopener" onclick="ga('send','event','Social','Click - Twitter','https://twitter.com/username')">

                <svg class="h-12 w-12 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                    <path d="M10 .4C4.698.4.4 4.698.4 10s4.298 9.6 9.6 9.6 9.6-4.298 9.6-9.6S15.302.4 10 .4zm3.905 7.864c.004.082.005.164.005.244 0 2.5-1.901 5.381-5.379 5.381a5.335 5.335 0 01-2.898-.85c.147.018.298.025.451.025.886 0 1.701-.301 2.348-.809a1.895 1.895 0 01-1.766-1.312 1.9 1.9 0 00.853-.033 1.892 1.892 0 01-1.517-1.854v-.023c.255.141.547.227.857.237a1.89 1.89 0 01-.585-2.526 5.376 5.376 0 003.897 1.977 1.891 1.891 0 013.222-1.725 3.797 3.797 0 001.2-.459 1.9 1.9 0 01-.831 1.047 3.799 3.799 0 001.086-.299 3.834 3.834 0 01-.943.979z" />
                </svg>

            </a>
        </li>
        <li class="mr-2">
            <a class="text-gray-100 transition duration-100 opacity-50 hover:text-white hover:opacity-100" href="https://www.instagram.com/username/" title="Instagram" target="_blank" rel="noopener" onclick="ga('send','event','Social','Click - Instagram','https://www.instagram.com/username/')">

                <svg class="h-12 w-12 fill-current" xmlns="http://www.w3.org/2000/svg" data-name="Instagram w/circle" viewBox="0 0 19.2 19.2">
                    <path d="M13.498 6.651a1.656 1.656 0 00-.95-.949 2.766 2.766 0 00-.928-.172c-.527-.024-.685-.03-2.02-.03s-1.493.006-2.02.03a2.766 2.766 0 00-.929.172 1.656 1.656 0 00-.949.95 2.766 2.766 0 00-.172.928c-.024.527-.03.685-.03 2.02s.006 1.493.03 2.02a2.766 2.766 0 00.172.929 1.656 1.656 0 00.95.949 2.766 2.766 0 00.928.172c.527.024.685.029 2.02.029s1.493-.005 2.02-.03a2.766 2.766 0 00.929-.171 1.656 1.656 0 00.949-.95 2.766 2.766 0 00.172-.928c.024-.527.029-.685.029-2.02s-.005-1.493-.03-2.02a2.766 2.766 0 00-.171-.929zM9.6 12.168A2.568 2.568 0 1112.168 9.6 2.568 2.568 0 019.6 12.168zm2.669-4.637a.6.6 0 11.6-.6.6.6 0 01-.6.6z" />
                    <circle cx="9.6" cy="9.6" r="1.667" />
                    <path d="M9.6 0a9.6 9.6 0 109.6 9.6A9.6 9.6 0 009.6 0zm4.97 11.661a3.67 3.67 0 01-.233 1.214 2.556 2.556 0 01-1.462 1.462 3.67 3.67 0 01-1.213.233c-.534.024-.704.03-2.062.03s-1.528-.006-2.062-.03a3.67 3.67 0 01-1.213-.233 2.556 2.556 0 01-1.462-1.462 3.67 3.67 0 01-.233-1.213c-.024-.534-.03-.704-.03-2.062s.006-1.528.03-2.062a3.67 3.67 0 01.232-1.213 2.556 2.556 0 011.463-1.463 3.67 3.67 0 011.213-.232c.534-.024.704-.03 2.062-.03s1.528.006 2.062.03a3.67 3.67 0 011.213.232 2.556 2.556 0 011.462 1.463 3.67 3.67 0 01.233 1.213c.024.534.03.704.03 2.062s-.006 1.528-.03 2.062z" />
                </svg>

            </a>
        </li>
        <li class="mr-2">
            <a class="text-gray-100 transition duration-100 opacity-50 hover:text-white hover:opacity-100" href="https://ca.linkedin.com/company/username" title="LinkedIn" target="_blank" rel="noopener" onclick="ga('send','event','Social','Click - LinkedIn','https://ca.linkedin.com/company/username')">

                <svg class="h-12 w-12 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                    <path d="M10 .4C4.698.4.4 4.698.4 10s4.298 9.6 9.6 9.6 9.6-4.298 9.6-9.6S15.302.4 10 .4zM7.65 13.979H5.706V7.723H7.65v6.256zm-.984-7.024c-.614 0-1.011-.435-1.011-.973 0-.549.409-.971 1.036-.971s1.011.422 1.023.971c0 .538-.396.973-1.048.973zm8.084 7.024h-1.944v-3.467c0-.807-.282-1.355-.985-1.355-.537 0-.856.371-.997.728-.052.127-.065.307-.065.486v3.607H8.814v-4.26c0-.781-.025-1.434-.051-1.996h1.689l.089.869h.039c.256-.408.883-1.01 1.932-1.01 1.279 0 2.238.857 2.238 2.699v3.699z" />
                </svg>

            </a>
        </li>
        <li class="mr-2">
            <a class="text-gray-100 transition duration-100 opacity-50 hover:text-white hover:opacity-100" href="https://www.youtube.com/user/username" title="YouTube" target="_blank" rel="noopener" onclick="ga('send','event','Social','Click - YouTube','https://www.youtube.com/user/username')">

                <svg class="h-12 w-12 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                    <path d="M11.603 9.833L9.357 8.785C9.161 8.694 9 8.796 9 9.013v1.974c0 .217.161.319.357.228l2.245-1.048c.197-.092.197-.242.001-.334zM10 .4C4.698.4.4 4.698.4 10s4.298 9.6 9.6 9.6 9.6-4.298 9.6-9.6S15.302.4 10 .4zm0 13.5c-4.914 0-5-.443-5-3.9s.086-3.9 5-3.9 5 .443 5 3.9-.086 3.9-5 3.9z" />
                </svg>

            </a>
        </li>
        <li class="mr-2">
            <a class="text-gray-100 transition duration-100 opacity-50 hover:text-white hover:opacity-100" href="https://www.tripadvisor.ca/" title="Tripadvisor" target="_blank" rel="noopener" onclick="ga('send','event','Social','Click - Tripadvisor','https://www.tripadvisor.ca/')">

                <svg class="h-12 w-12 fill-current" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M32.5 65C14.5507 65 0 50.4493 0 32.5C0 14.5507 14.5507 0 32.5 0C50.4493 0 65 14.5507 65 32.5C65 50.4493 50.4493 65 32.5 65ZM52.6143 26.3661L56.5447 22.1211H47.8286C43.4652 19.1623 38.1955 17.439 32.4963 17.439C26.8044 17.439 21.5494 19.166 17.1932 22.1211H8.45528L12.3857 26.3661C9.97654 28.5482 8.46624 31.6913 8.46624 35.1812C8.46624 41.7672 13.8452 47.1068 20.4796 47.1068C23.6312 47.1068 26.5025 45.9001 28.6461 43.9276L32.4964 48.0894L36.3468 43.9312C38.4904 45.9038 41.358 47.1068 44.5097 47.1068C51.1441 47.1068 56.5302 41.7672 56.5302 35.1812C56.5338 31.6877 55.0235 28.5446 52.6143 26.3661ZM20.4831 43.252C15.9922 43.252 12.353 39.6393 12.353 35.1812C12.353 30.723 15.9923 27.1103 20.4831 27.1103C24.9739 27.1103 28.6132 30.723 28.6132 35.1812C28.6132 39.6393 24.9739 43.252 20.4831 43.252ZM32.5 34.9464C32.5 29.6356 28.6097 25.0764 23.4746 23.1291C26.2513 21.9766 29.2974 21.3371 32.4963 21.3371C35.6953 21.3371 38.7449 21.9766 41.5217 23.1291C36.3904 25.08 32.5 29.6357 32.5 34.9464ZM44.5133 43.252C40.0224 43.252 36.3831 39.6393 36.3831 35.1812C36.3831 30.723 40.0224 27.1103 44.5133 27.1103C49.0042 27.1103 52.6434 30.723 52.6434 35.1812C52.6434 39.6393 49.0041 43.252 44.5133 43.252ZM44.5133 30.947C42.1587 30.947 40.2516 32.8401 40.2516 35.1776C40.2516 37.515 42.1587 39.408 44.5133 39.408C46.8679 39.408 48.7749 37.515 48.7749 35.1776C48.7748 32.8437 46.8679 30.947 44.5133 30.947ZM24.7447 35.1812C24.7447 32.8437 22.8377 30.947 20.4831 30.9506C18.1286 30.9506 16.2215 32.8437 16.2215 35.1812C16.2215 37.5186 18.1286 39.4117 20.4831 39.4117C22.8377 39.4117 24.7447 37.5186 24.7447 35.1812Z" fill="currentColor" />
                </svg>

            </a>
        </li>
        <li class="mr-2">
            <a class="text-gray-100 transition duration-100 opacity-50 hover:text-white hover:opacity-100" href="https://www.pinterest.ca/username" title="Pinterest" target="_blank" rel="noopener" onclick="ga('send','event','Social','Click - Pinterest','https://www.pinterest.ca/username')">

                <svg class="h-12 w-12 fill-current" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <path d="M10 .4a9.6 9.6 0 1 0 0 19.2A9.6 9.6 0 0 0 10 .4Zm.66 11.88c-.62-.05-.88-.36-1.36-.65-.27 1.39-.6 2.71-1.55 3.41-.3-2.1.43-3.68.77-5.35-.58-.98.06-2.94 1.29-2.46 1.5.59-1.31 3.62.58 4 1.96.39 2.77-3.42 1.55-4.65C10.17 4.8 6.8 6.53 7.22 9.1c.1.63.74.81.26 1.67-1.13-.25-1.47-1.14-1.42-2.32.06-1.94 1.74-3.3 3.42-3.5 2.12-.23 4.11.78 4.4 2.79.3 2.25-.97 4.69-3.24 4.5Z" />
                </svg>

            </a>
        </li>
    </ul>

</div>


        <div class="h-screen p-6 bg-gray-600">

  <!-- Icons using Entypo -->
  <ul class="flex text-4xl">
    <li class="mr-2">
      <a class="text-gray-100 transition duration-100 opacity-50 hover:text-white hover:opacity-100"
         href="https://www.facebook.com/username" title="Facebook" target="_blank" rel="noopener"
         onclick="ga('send','event','Social','Click - Facebook','https://www.facebook.com/username')">

        <svg class="h-12 w-12 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
          <path d="M10 .4C4.698.4.4 4.698.4 10s4.298 9.6 9.6 9.6 9.6-4.298 9.6-9.6S15.302.4 10 .4zm2.274 6.634h-1.443c-.171 0-.361.225-.361.524V8.6h1.805l-.273 1.486H10.47v4.461H8.767v-4.461H7.222V8.6h1.545v-.874c0-1.254.87-2.273 2.064-2.273h1.443v1.581z"/>
        </svg>

      </a>
    </li>
    <li class="mr-2">
      <a class="text-gray-100 transition duration-100 opacity-50 hover:text-white hover:opacity-100"
         href="https://twitter.com/username" title="Twitter" target="_blank" rel="noopener"
         onclick="ga('send','event','Social','Click - Twitter','https://twitter.com/username')">

        <svg class="h-12 w-12 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
          <path d="M10 .4C4.698.4.4 4.698.4 10s4.298 9.6 9.6 9.6 9.6-4.298 9.6-9.6S15.302.4 10 .4zm3.905 7.864c.004.082.005.164.005.244 0 2.5-1.901 5.381-5.379 5.381a5.335 5.335 0 01-2.898-.85c.147.018.298.025.451.025.886 0 1.701-.301 2.348-.809a1.895 1.895 0 01-1.766-1.312 1.9 1.9 0 00.853-.033 1.892 1.892 0 01-1.517-1.854v-.023c.255.141.547.227.857.237a1.89 1.89 0 01-.585-2.526 5.376 5.376 0 003.897 1.977 1.891 1.891 0 013.222-1.725 3.797 3.797 0 001.2-.459 1.9 1.9 0 01-.831 1.047 3.799 3.799 0 001.086-.299 3.834 3.834 0 01-.943.979z"/>
        </svg>

      </a>
    </li>
    <li class="mr-2">
      <a class="text-gray-100 transition duration-100 opacity-50 hover:text-white hover:opacity-100"
         href="https://www.instagram.com/username/" title="Instagram" target="_blank" rel="noopener"
         onclick="ga('send','event','Social','Click - Instagram','https://www.instagram.com/username/')">

        <svg class="h-12 w-12 fill-current" xmlns="http://www.w3.org/2000/svg"
             data-name="Instagram w/circle"
             viewBox="0 0 19.2 19.2">
          <path d="M13.498 6.651a1.656 1.656 0 00-.95-.949 2.766 2.766 0 00-.928-.172c-.527-.024-.685-.03-2.02-.03s-1.493.006-2.02.03a2.766 2.766 0 00-.929.172 1.656 1.656 0 00-.949.95 2.766 2.766 0 00-.172.928c-.024.527-.03.685-.03 2.02s.006 1.493.03 2.02a2.766 2.766 0 00.172.929 1.656 1.656 0 00.95.949 2.766 2.766 0 00.928.172c.527.024.685.029 2.02.029s1.493-.005 2.02-.03a2.766 2.766 0 00.929-.171 1.656 1.656 0 00.949-.95 2.766 2.766 0 00.172-.928c.024-.527.029-.685.029-2.02s-.005-1.493-.03-2.02a2.766 2.766 0 00-.171-.929zM9.6 12.168A2.568 2.568 0 1112.168 9.6 2.568 2.568 0 019.6 12.168zm2.669-4.637a.6.6 0 11.6-.6.6.6 0 01-.6.6z"/>
          <circle cx="9.6" cy="9.6" r="1.667"/>
          <path d="M9.6 0a9.6 9.6 0 109.6 9.6A9.6 9.6 0 009.6 0zm4.97 11.661a3.67 3.67 0 01-.233 1.214 2.556 2.556 0 01-1.462 1.462 3.67 3.67 0 01-1.213.233c-.534.024-.704.03-2.062.03s-1.528-.006-2.062-.03a3.67 3.67 0 01-1.213-.233 2.556 2.556 0 01-1.462-1.462 3.67 3.67 0 01-.233-1.213c-.024-.534-.03-.704-.03-2.062s.006-1.528.03-2.062a3.67 3.67 0 01.232-1.213 2.556 2.556 0 011.463-1.463 3.67 3.67 0 011.213-.232c.534-.024.704-.03 2.062-.03s1.528.006 2.062.03a3.67 3.67 0 011.213.232 2.556 2.556 0 011.462 1.463 3.67 3.67 0 01.233 1.213c.024.534.03.704.03 2.062s-.006 1.528-.03 2.062z"/>
        </svg>

      </a>
    </li>
    <li class="mr-2">
      <a class="text-gray-100 transition duration-100 opacity-50 hover:text-white hover:opacity-100"
         href="https://ca.linkedin.com/company/username" title="LinkedIn" target="_blank"
         rel="noopener"
         onclick="ga('send','event','Social','Click - LinkedIn','https://ca.linkedin.com/company/username')">

        <svg class="h-12 w-12 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
          <path d="M10 .4C4.698.4.4 4.698.4 10s4.298 9.6 9.6 9.6 9.6-4.298 9.6-9.6S15.302.4 10 .4zM7.65 13.979H5.706V7.723H7.65v6.256zm-.984-7.024c-.614 0-1.011-.435-1.011-.973 0-.549.409-.971 1.036-.971s1.011.422 1.023.971c0 .538-.396.973-1.048.973zm8.084 7.024h-1.944v-3.467c0-.807-.282-1.355-.985-1.355-.537 0-.856.371-.997.728-.052.127-.065.307-.065.486v3.607H8.814v-4.26c0-.781-.025-1.434-.051-1.996h1.689l.089.869h.039c.256-.408.883-1.01 1.932-1.01 1.279 0 2.238.857 2.238 2.699v3.699z"/>
        </svg>

      </a>
    </li>
    <li class="mr-2">
      <a class="text-gray-100 transition duration-100 opacity-50 hover:text-white hover:opacity-100"
         href="https://www.youtube.com/user/username" title="YouTube" target="_blank" rel="noopener"
         onclick="ga('send','event','Social','Click - YouTube','https://www.youtube.com/user/username')">

        <svg class="h-12 w-12 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
          <path d="M11.603 9.833L9.357 8.785C9.161 8.694 9 8.796 9 9.013v1.974c0 .217.161.319.357.228l2.245-1.048c.197-.092.197-.242.001-.334zM10 .4C4.698.4.4 4.698.4 10s4.298 9.6 9.6 9.6 9.6-4.298 9.6-9.6S15.302.4 10 .4zm0 13.5c-4.914 0-5-.443-5-3.9s.086-3.9 5-3.9 5 .443 5 3.9-.086 3.9-5 3.9z"/>
        </svg>

      </a>
    </li>
    <li class="mr-2">
      <a class="text-gray-100 transition duration-100 opacity-50 hover:text-white hover:opacity-100"
         href="https://www.tripadvisor.ca/" title="Tripadvisor" target="_blank" rel="noopener"
         onclick="ga('send','event','Social','Click - Tripadvisor','https://www.tripadvisor.ca/')">

        <svg class="h-12 w-12 fill-current" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd"
                d="M32.5 65C14.5507 65 0 50.4493 0 32.5C0 14.5507 14.5507 0 32.5 0C50.4493 0 65 14.5507 65 32.5C65 50.4493 50.4493 65 32.5 65ZM52.6143 26.3661L56.5447 22.1211H47.8286C43.4652 19.1623 38.1955 17.439 32.4963 17.439C26.8044 17.439 21.5494 19.166 17.1932 22.1211H8.45528L12.3857 26.3661C9.97654 28.5482 8.46624 31.6913 8.46624 35.1812C8.46624 41.7672 13.8452 47.1068 20.4796 47.1068C23.6312 47.1068 26.5025 45.9001 28.6461 43.9276L32.4964 48.0894L36.3468 43.9312C38.4904 45.9038 41.358 47.1068 44.5097 47.1068C51.1441 47.1068 56.5302 41.7672 56.5302 35.1812C56.5338 31.6877 55.0235 28.5446 52.6143 26.3661ZM20.4831 43.252C15.9922 43.252 12.353 39.6393 12.353 35.1812C12.353 30.723 15.9923 27.1103 20.4831 27.1103C24.9739 27.1103 28.6132 30.723 28.6132 35.1812C28.6132 39.6393 24.9739 43.252 20.4831 43.252ZM32.5 34.9464C32.5 29.6356 28.6097 25.0764 23.4746 23.1291C26.2513 21.9766 29.2974 21.3371 32.4963 21.3371C35.6953 21.3371 38.7449 21.9766 41.5217 23.1291C36.3904 25.08 32.5 29.6357 32.5 34.9464ZM44.5133 43.252C40.0224 43.252 36.3831 39.6393 36.3831 35.1812C36.3831 30.723 40.0224 27.1103 44.5133 27.1103C49.0042 27.1103 52.6434 30.723 52.6434 35.1812C52.6434 39.6393 49.0041 43.252 44.5133 43.252ZM44.5133 30.947C42.1587 30.947 40.2516 32.8401 40.2516 35.1776C40.2516 37.515 42.1587 39.408 44.5133 39.408C46.8679 39.408 48.7749 37.515 48.7749 35.1776C48.7748 32.8437 46.8679 30.947 44.5133 30.947ZM24.7447 35.1812C24.7447 32.8437 22.8377 30.947 20.4831 30.9506C18.1286 30.9506 16.2215 32.8437 16.2215 35.1812C16.2215 37.5186 18.1286 39.4117 20.4831 39.4117C22.8377 39.4117 24.7447 37.5186 24.7447 35.1812Z"
                fill="currentColor"/>
        </svg>

      </a>
    </li>
    <li class="mr-2">
      <a class="text-gray-100 transition duration-100 opacity-50 hover:text-white hover:opacity-100"
         href="https://www.pinterest.ca/username" title="Pinterest" target="_blank" rel="noopener"
         onclick="ga('send','event','Social','Click - Pinterest','https://www.pinterest.ca/username')">

        <svg class="h-12 w-12 fill-current" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M10 .4a9.6 9.6 0 1 0 0 19.2A9.6 9.6 0 0 0 10 .4Zm.66 11.88c-.62-.05-.88-.36-1.36-.65-.27 1.39-.6 2.71-1.55 3.41-.3-2.1.43-3.68.77-5.35-.58-.98.06-2.94 1.29-2.46 1.5.59-1.31 3.62.58 4 1.96.39 2.77-3.42 1.55-4.65C10.17 4.8 6.8 6.53 7.22 9.1c.1.63.74.81.26 1.67-1.13-.25-1.47-1.14-1.42-2.32.06-1.94 1.74-3.3 3.42-3.5 2.12-.23 4.11.78 4.4 2.79.3 2.25-.97 4.69-3.24 4.5Z"/>
        </svg>

      </a>
    </li>
  </ul>

</div>


        
            
            /* No context defined. */