<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.
// ```
// sprite icon before the text
// .lib-icon-image() mixin is used to create icons using single image or sprite. It has one mandatory parameter - @_icon-image. This parameter accepts the path to an image or sprite.
//
// ```
// icon-search
// ```
.example-icon-7 {
.lib-icon-image(@_icon-image: '@{baseDir}images/blank-theme-icons.png');
}
// # Icon with image or sprite variables
//
// //
| Mixin variable | //Global variable | //Default value | //Allowed values | //Comment | //
|---|---|---|---|---|
| @_icon-image | //- | //- | //'' | false | value | //A link to an image or sprite, mandatory parameter | //
| @_icon-image-height | //@icon__height | //26px | //'' | false | value | //Icon image height | //
| @_icon-image-width | //@icon__width | //26px | //'' | false | value | //Icon image width | //
| @_icon-image-margin | //@icon__margin | //0 | //'' | false | value | //Icon image margin | //
| @_icon-image-vertical-align | //@icon__vertical-align | //middle | //'' | false | value | //Icon image vertical align | //
| @_icon-image-position-x | //@icon-image__position-x | //0 | //'' | false | value | //Horizontal image position | //
| @_icon-image-position-y | //@icon-image__position-y | //0 | //'' | false | value | //Vertical image position | //
| @_icon-image-position | //@icon__position | //before | //before | after | //Icon image position | //
| @_icon-image-text-hide | //@icon__text-hide | //false | //true | false | //The text in the <span> tag should be hidden | //
.lib-icon-image-position() mixin is used. By managing its @_icon-image-position-x and @_icon-image-position-y variables you can move the image on element's background. The @_icon-image-position variable is used to define the position of icon (before or after the element).
// ```
// icon-star
// //
| Mixin variable | //Global variable | //Default value | //Allowed values | //Comment | //
|---|---|---|---|---|
| @_icon-image-position-x | //@icon-image__position-x | //0 | //'' | false | value | //Horizontal starting position of icon image | //
| @_icon-image-position-y | //@icon-image__position-y | //0 | //'' | false | value | //Vertical starting position of icon image | //
| @_icon-image-position | //@icon__position | //before | //before | after | //Position of the icon which is set for the element | //
.lib-icon-sprite-position() is used to manage the position of sprite background image. It assumes the use of a single sprite image with individual images **placed on a regular grid**.
// ```
// icon text
// ```
.example-icon-10 {
.lib-icon-image(@_icon-image: '@{baseDir}images/blank-theme-icons.png');
.lib-icon-sprite-position(4, 0);
}
// # Icon sprite position variables
//
// //
| Mixin variable | //Global variable | //Default value | //Allowed values | //Comment | //
|---|---|---|---|---|
| @_icon-sprite-position-x | //@icon-sprite__position-x | //0 | //'' | false | value | //The x coordinate of the desired image on the grid | //
| @_icon-sprite-position-y | //@icon-sprite__position-y | //0 | //'' | false | value | //The y coordinate of the desired image on the grid | //
| @_icon-sprite-grid | //@icon-sprite__grid | //26px | //'' | false | value | //The size of the grid (in pixels) that the individual images are placed on | //
| @_icon-sprite-position | //@icon__position | //before | //before | after | //Icon image position | //
.lib-icon-image-size() is used to change the image/sprite icon size
// ```
// icon-search
// ```
.example-icon-11 {
.lib-icon-image(@_icon-image: '@{baseDir}images/blank-theme-icons.png');
.lib-icon-image-size(30px, 30px);
&:before {
background-color: #f1f1f1;
}
}
// # Image/sprite icon size variables
//
// //
| Mixin variable | //Global variable | //Default value | //Allowed values | //Comment | //
|---|---|---|---|---|
| @_icon-image-width | //@icon__width | //26px | //'' | false | value | //Icon image width | //
| @_icon-image-height | //@icon__height | //26px | //'' | false | value | //Icon image height | //
| @_icon-image-position | //@icon__position | //before | //before | after | //Icon image position | //
.lib-icon-font() mixin is used to create icons using font icons. It has one mandatory parameter - @_icon-font-content. This parameter accepts the font icon code.
//
// ```
// icon-calendar
// ```
.example-icon-12 {
.lib-icon-font(
@icon-calendar,
@_icon-font-size: 28px
);
}
// # Font icon variables
//
// //
| Mixin variable | //Global variable | //Default value | //Allowed values | //Comment | //
|---|---|---|---|---|
| @_icon-font-content | //- | //// | '' | icon code | icon variables | //Font icon code | //
| @_icon-font | //@icon-font | //@icons__font-name | //'' | false | value | //The icon font | //
| @_icon-font-size | //@icon-font__size | //inherit | //'' | false | value | //Font icon size | //
| @_icon-font-line-height | //@icon-font__line-height | //@icon-font__size | //'' | false | value | //Font icon line height | //
| @_icon-font-color | //@icon-font__color | //inherit | //'' | inherit | color code | //Font icon color | //
| @_icon-font-color-hover | //@icon-font__color-hover | //false | //'' | inherit | color code | //Font icon color - hover state | //
| @_icon-font-color-active | //@icon-font__color-active | //false | //'' | inherit | color code | //Font icon color - active state | //
| @_icon-font-margin | //@icon-font__margin | //@icon__margin | //'' | false | value | //Font icon margin | //
| @_icon-font-vertical-align | //@icon-font__vertical-align | //@icon__vertical-align | //'' | false | value | //Font icon vertical align | //
| @_icon-font-position | //@icon-font__position | //@icon__position | //before | after | //Font icon position | //
| @_icon-font-text-hide | //@icon-font__text-hide | //@icon__text-hide | //true | false | //The text of the element is replaced with the icon(true), or the icon is on the side of the text (false) | //
| @_icon-font-display | //@icon-font__display | //inline-block | //'' | false | value | //The 'display' property of the icon container | //
.lib-icon-font-size() mixin is used to change size of the font icon which is already defined. The mixin generates only new font size and line height without any other options. @_icon-font-position variable is used to define the position of icon (before or after the element) which we want to set font size of.
//
// ```
// icon-calendar
// ```
.example-icon-13 {
.lib-icon-font(@icon-calendar);
.lib-icon-font-size(
@_icon-font-size: 26px
);
}
// # Change the size of font icon variables
//
// //
| Mixin variable | //Global variable | //Default value | //Allowed values | //Comment | //
|---|---|---|---|---|
| @_icon-font-size | //@icon-font__size | //inherit | //'' | false | value | //Font icon font size | //
| @_icon-font-line-height | //@icon-font__line-height | //@icon-font__size | //'' | false | value | //Font icon line height | //
| @_icon-font-position | //@icon-font__position | //before | //before | after | //Font icon - icon position | //
.lib-icon-text-hide() mixin can be used separately to hide text of an element that has an icon text. This mixin accepts no variables.
//
// ```
// icon-calendar
// ```
.example-icon-14 {
.lib-icon-font(
@icon-envelope,
@_icon-font-size: 26px
);
.lib-icon-text-hide();
}
// # Sprite and font icons for Blank theme
// You can use the icons designed to our Blank theme, which are also available in two variants: sprite and font
// ##Icons using sprite
// ```
//