Social Media Icons

Styles for social media icons used in social-media-icons module.

Structurally there is one main element .social-media which contains following elements:

• .social-media__list
• .social-media__item
• .social-media__item-image
• .social-media__item-title

Example

Here is an example of social media icons element usage.

HTML

<div class="social-media">
    <ul class="social-media__list">
        <li class="social-media__item" style="--socialMediaIconBgColor: hsla(0, 0%, 100%, 0.00); --socialMediaIconBorderRadius: 0; --socialMediaIconBorderWidth: 0; --socialMediaIconPadding: 0; --socialMediaIconTextColor: var(--globalFontColor);  --socialMediaIconBorderColor: rgba(255, 255, 255, 0);">
            <a href="http://example.com/" target="_blank" rel="noopener nofollow" aria-label="Facebook, otwiera się w nowej karcie">
                <picture class="image">
                    <img src="/link/to/my-facebook-image.svg" id="my-image.svg" alt="" class="social-media__item-image" decoding="async" loading="lazy">
                </picture>
            </a>
        </li>
        <li class="social-media__item" style="--socialMediaIconBgColor: hsla(0, 0%, 100%, 0.00); --socialMediaIconBorderRadius: 0; --socialMediaIconBorderWidth: 0; --socialMediaIconPadding: 0; --socialMediaIconTextColor: var(--globalFontColor);  --socialMediaIconBorderColor: rgba(255, 255, 255, 0);">
            <a href="http://example.com/" target="_blank" rel="noopener nofollow" aria-label="Instagram, otwiera się w nowej karcie">   
                <picture class="image">
                    <img src="/link/to/my-instagram-image.svg" id="my-image-1.svg" alt="" class="social-media__item-image" decoding="async" loading="lazy">
                </picture>
            </a>
        </li>
        <li class="social-media__item" style="--socialMediaIconBgColor: rgba(255, 255, 255, 0); --socialMediaIconBorderRadius: 0; --socialMediaIconBorderWidth: 0; --socialMediaIconPadding: 0; --socialMediaIconTextColor: var(--globalFontColor);  --socialMediaIconBorderColor: rgba(255, 255, 255, 0);">
            <a href="http://example.com/" target="_blank" rel="noopener nofollow" aria-label="TikTok, otwiera się w nowej karcie">
                <picture class="image">                    
                    <img src="/link/to/my-tiktok-image.svg" id="my-image-2.svg" alt="" class="social-media__item-image" decoding="async" loading="lazy">
                </picture>
            </a>
        </li>
        <li class="social-media__item" style="--socialMediaIconBgColor: rgba(255, 255, 255, 0); --socialMediaIconBorderRadius: 0; --socialMediaIconBorderWidth: 0; --socialMediaIconPadding: 0; --socialMediaIconTextColor: var(--globalFontColor);  --socialMediaIconBorderColor: rgba(255, 255, 255, 0);">
            <a href="http://example.com/" target="_blank" rel="noopener nofollow" aria-label="Youtube, otwiera się w nowej karcie">
                <picture class="image">
                    <img src="/link/to/my-youtube-image.svg" id="my-image-3.svg" alt="" class="social-media__item-image" decoding="async" loading="lazy">
                </picture>
            </a>
        </li>
    </ul>
</div>

LESS

You can modify any social media icons less variable in your User Less section to change social media icons styles.

Social media icons variables

Variables used to style social media icons.

@socialMediaListGap: @globalSpacing;
@socialMediaItemGap: @socialMediaListGap / 2;

@socialMediaIconPadding: var(--socialMediaIconPadding, 10);

@socialMediaIconBgColor: var(--socialMediaIconBgColor, @globalBodyBackgroundColor);
@socialMediaIconTextColor: var(--socialMediaIconTextColor, @globalFontColor);

@socialMediaIconBorderWidth: var(--socialMediaIconBorderWidth, 0px);
@socialMediaIconBorderStyle: var(--socialMediaIconBorderStyle, solid);
@socialMediaIconBorderColor: var(--socialMediaIconBorderColor, #000);
@socialMediaIconBorderRadius: var(--socialMediaIconBorderRadius, 0);

Social media icons styles

Here are standard social media icons styles.

.social-media {
    .generate-borders(@socialMediaIconBorderWidth, @socialMediaIconBorderStyle, @socialMediaIconBorderColor);

    &__list {
        display: flex;
        flex-wrap: wrap;
        gap: @socialMediaListGap;
    }
    &__item {
        place-content: center;

        a {
            display: flex;
            flex-direction: column;
            border-radius: ~'calc(@{socialMediaIconBorderRadius} * 1%)';
            background-color: @socialMediaIconBgColor;
            padding: ~'calc(calc(@{socialMediaIconPadding} / @{baseFontSize}) * 1rem)';
            gap: @socialMediaItemGap;
            text-decoration: none;

            &:hover {
                text-decoration: underline;
            }
        }hmmm

        &-image {
            display: block;
            margin-inline: auto;
        }
        &-title {
            display: block;
            margin-inline: auto;
            color: @socialMediaIconTextColor;
            .font-size(@fontSizeInPxS);
        }
    }
}

Modules reference

• social-media-icons

Macros reference

• image
• header