How to add icon to action control?

Nirjonadda

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

ScreenShot00246.png
 

Russ

Pixel Exit Staff
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.

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

 

Nirjonadda

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

ScreenShot00248.png


ScreenShot00249.png


Code:
/* 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

Pixel Exit Staff
Try this instead:

Code:
/* 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

Customer
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 ... :love::love::love:

ScreenShot00260.png



Code:
/* 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

Customer
Oh ! Fixed with this CSS code ... :LOL:

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 */
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.