Social Icons

Share your content through social media or encourage users to follow.

• By default, icons width and height are set to 5rem and 3rem ( 80px and 48px on a based 16px HTML font size) respectively:

• Smaller icons can be achived by adding the are-small modiffier to the main social-icon container. This will set icon's width and height to 3.25rem ( 52px) and 2rem ( 32px) respectively:

Variables

• Default:

  :root {
    --icons-font-size: 1.5rem; // 24px
    --icons-width: 5rem;       // 80px
    --icons-height: 3rem;      // 48px
    --icons-gap: var(--space-xs, 1.25rem); // 20px
  }

• Small icons:

  .social-icons.are-small {
    --icons-font-size: 1.125rem; // 18px
    --icons-width: 3.25rem;      // 52px
    --icons-height: 2rem;        // 32px
    --icons-gap: .5rem;          // 8px
  }