UX Wizard sub-steps accepting fa-2x icon sizes

Hi,

At a client we’ve made some changes to make the icons of sub-steps of a wizard clearer for the users. The default size of the icons is quite small and can be a little hard to differentiate if there are multiple sub-steps and the icons are similar, resulting in confusion for the users.

I increased the size of the fa icons to twice the size (fa-2x). This resulted in some misalignment of the icons natively, which I then had to rectify using some custom CSS. It would be great to have this functionality natively in UX with the ability to choose either normal, fa-1g or fa2x icon sizes. This could be done either by entering ‘fa-2x’ in the icon field of the advanced settings, or preferably having an icon selector in the advanced settings dialog which lets you browse the icons, and then select whether it is 1x, 1g (33% bigger) or 2x.

The code I used is below for reference. Screenshots are attached showing both 1x and 2x icons working, giving the user easy ability to choose which they want to use.

‌

_custom-style.scss

// Wizard customisation

.wizard-pf-sidebar .list-group-item > a > span > i:not(.fa-2x) {
padding-left: 18px;
}

.wizard-pf-sidebar .list-group-item > a > span > i.fa-2x {
padding-left: 13px;
}

.wizard-pf-sidebar .list-group-item > a {
padding-left: 0px;
}

.wizard-pf-sidebar .list-group-item > a > span.fa-angle-double-right {
padding-left: 18px;
}

.wizard-pf-substep-title {
margin-left: 10px;
padding-left: 10px;
}

Comments (2)