How to add icon to action control?

[Nirjonadda]

Please can you let me know that How to add icon to action control area?

 

[Russ]

You need to inspect the element and add the CSS class name to your extra.less. Replace action--warn with the class name of those custom links.

.actionBar-action.actionBar-action--warn:before {
    content: "\f071";
}

Find the Perfect Icon for Your Project | Font Awesome

Search all the icons and match your project with a look and feel that's just right, including the all-new Sharp Solid Icons, now available in Font Awesome 6.

fontawesome.com

 

[Nirjonadda]

But this are not add space or margin after the icon. Also does this CSS class name are correct?

/* Add icon to action control START */
.actionBar-action.actionBar-action--menuItem.LinkCheckTrigger:before {
    content: "\f360";
}
.actionBar-action.actionBar-action--changeOwnerAndDate:before {
    content: "\f017";
}
/* Add icon to action control END */

 

[Russ]

Try this instead:

/* Add icon to action control START */
.actionBar-action.actionBar-action--menuItem.LinkCheckTrigger:before {
    content: "\f360\20";
}
.actionBar-action.actionBar-action--changeOwnerAndDate:before {
    content: "\f017\20";
}
/* Add icon to action control END */

 

[Nirjonadda]

Excellent work ! Thank you for your continued support.

 

[Russ]

You're welcome , I'm glad it's sorted.

 

[Nirjonadda]

I am really enjoying this style and made this style for forum default. One more improvement missing icon in Toggle sidebar. I am using this code what your are send to me. Also I am 100% happy after implementation Light/Drak Style switch icon in Footer ...

/* Style switch icon in Footer START */
.p-linkList-changeStyle a:before, .p-linkList-changeWidth a:before, .p-linkList-changeLanguage a:before
{
    .m-faBase();
    display: inline-block;
    margin-right: 2px;
}
.p-linkList-changeStyle a:before { .m-faContent(@fa-var-paint-brush); }
.p-linkList-changeWidth a:before { .m-faContent(@fa-var-sliders-h); }
.p-linkList-changeLanguage a:before { .m-faContent(@fa-var-globe); }
/* Style switch icon in Footer END */

 

[Nirjonadda]

Oh ! Fixed with this CSS code ...

/* Style switch icon in Footer START */
.p-linkList-changeStyle a:before, .p-linkList-changeWidth a:before, .p-linkList-changeLanguage a:before, .p-linkList-toggleSidebar a:before
{
    .m-faBase();
    display: inline-block;
    margin-right: 2px;
}
.p-linkList-changeStyle a:before { .m-faContent(@fa-var-paint-brush); }
.p-linkList-changeWidth a:before { .m-faContent(@fa-var-sliders-h); }
.p-linkList-changeLanguage a:before { .m-faContent(@fa-var-globe); }
.p-linkList-toggleSidebar a:before { .m-faContent(@fa-var-toggle-on); }
/* Style switch icon in Footer END */