Labeled Icon¶

Use labeled icon element to indicate a visualised text element on a page.

Example¶

Storefront theme provides predefined stylings for a labeled icon.

User

HTML

<div class="labeled-icon">
    <svg class="labeled-icon__icon">
        <use xlink:href="https://example.com/assets/img/icons/symbol-defs.svg#icon-user"></use>
    </svg>
    <div class="labeled-icon__signature">User</div>
</div>

Labeled Icon tags¶

The .labeled-icon classes were designed to be used with block elements like <div>. However, you can use them with any other element and customize it to your own needs.

LESS¶

You can modify any labeled icon less variable in your User Less section to change labeled icon styles.

Labeled Icon variables¶

Variables used to style labeled icons.

@labeledIconPaddingTop: 4;
@labeledIconPaddingRight: 4;
@labeledIconPaddingBottom: 4;
@labeledIconPaddingLeft: 4;

@labeledIconColor:@globalFontColor;
@labeledIconIconFillColor: @labeledIconColor;
@labeledIconIconStrokeColor: @labeledIconColor;
@labeledIconSignatureColor: @labeledIconColor;

If you want to change labeled icon styles, you can just change the variables. To change default color just modify @labeledIconSignatureColor variable.

@labeledIconSignatureColor: red;

Labeled icons standard styles¶

Here are standard labeled icon styles.

.labeled-icon {
    display: inline-flex;
    align-items: center;
    flex-direction: column;
    width: fit-content;
    text-decoration: none;

    &_horizontal {
        flex-direction: row;
        column-gap: @globalSpacing * 0.5;
    }

    &__icon {
        .icon-l();

        fill: transparent;
        stroke: @labeledIconIconStrokeColor;

        &_m {
            .icon-m();
        }
    }

    &__signature {
        .size-xs();

        color: @labeledIconSignatureColor;
        text-decoration: none;

        &_secondary {
            .size-s();
        }
    }

    &:hover {
        cursor: pointer;

        .labeled-icon__signature {
            text-decoration: underline;
        }
    }
}