Nirjonadda

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

ScreenShot00246.png
 
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";
}

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

Back