Icons
Icons can be represented by using the fonts, images, or sprites.
An icon can be added to any HTML tag. For this purpose you need to use additional <span> tag within your tag. This additional tag serves for displaying an icon without visible text, thus following the accessibility requirements. Then you need to apply appropriate icon mixin for this tag's class. Icon can be added both before and after element's text. Also, icon can be displayed instead of element's text (in this case the text is hidden).
There are two ways to insert icon: first you can use sprite or image, second you can use an icon font. Magento UI library provides mixins for both of them.
.example-icon-1 {
.lib-icon-image(@_icon-image: '@{baseDir}images/blank-theme-icons.png');
}
.example-icon-2 {
.lib-icon-image(
@_icon-image: '@{baseDir}images/blank-theme-icons.png',
@_icon-image-position-x: -26px,
@_icon-image-position-y: 0,
@_icon-image-position: after
);
}
.example-icon-3 {
.lib-icon-image(
@_icon-image: '@{baseDir}images/blank-theme-icons.png',
@_icon-image-position-x: -156px,
@_icon-image-position-y: -52px,
@_icon-image-text-hide: true
);
}
.example-icon-4 {
.lib-icon-font(
@_icon-font-content: @icon-settings,
@_icon-font-size: 24px
);
}
.example-icon-5 {
.lib-icon-font(
@_icon-font-content: @icon-star,
@_icon-font-size: 24px,
@_icon-font-position: after
);
}
.example-icon-6 {
.lib-icon-font(
@_icon-font-content: @icon-flag,
@_icon-font-size: 24px,
@_icon-font-text-hide: true
);
}