• While creating requests or asking for support in the existing XenForo threads please maintain XenForo support policy strictly.

  • You MUST read the Babiato Rules before making your first post otherwise you may get permanent warning points or a permanent Ban.

    Our resources on Babiato Forum are CLEAN and SAFE. So you can use them for development and testing purposes. If your are on Windows and have an antivirus that alerts you about a possible infection: Know it's a false positive because all scripts are double checked by our experts. We advise you to add Babiato to trusted sites/sources or disable your antivirus momentarily while downloading a resource. "Enjoy your presence on Babiato"

How to change 'widget icon' to custom fontawesome ?

mei2020

Active member
Nov 23, 2020
188
31
28
Hi guys,
Some time ago I was looking for a way to change the widget icon in xenforo ...
1608662024331.png
I found several related articles on google but none of them worked for me o_O

I've been read the
docummentation but there's nothing explain how to change it in detail 🙂
Can someone explain this sample for me? I don't get it 😅

CSS:
/* For use in LESS: */
.someIcon {   /* ??? is this '.someicon an example or ready to use?  */     
   <xf:macro                
        template="uix_icons.less"   /* ??? what the relation with uix_icon.less?  */               
        name="content"   /* ??? where to find the name? is it leave tobe default (content)?   */
        arg-icon="account"    /* ??? where to find the 'arg-icon id?   */
     />        
}


Another experiment to change 'Countdown widget icon' (not worked):
CSS:
/* Countdown Widget - put in [I]extra.less[/I] */
[data-widget-key="countdown_me"] h3.block-minorHeader:before {
    display: inline-block;
    padding-right: 0px;
    .m-faBase();
    .m-faContent(@fas fa-hourglass-start fa-spin);
}

Another experiment to change 'Share Page widget icon' (not worked):
CSS:
/* Share Page Widget - put in [I]extra.less[/I] */
[data-widget-key="forum_overview_share_page"] h3.block-minorHeader:before {
    display: inline-block;
    padding-right: 0px;
    .m-faBase();
    .m-faContent(/f1e0 /10f1e0);
}

Did i miss something?
Summon @Babak , @ALiveVam , @TassieNZ , @ELLIO7 , @hexor, @medw1311
 
Last edited:
Hi guys,
Some time ago I was looking for a way to change the widget icon in xenforo ...
1608662024331.png
I found several related articles on google but none of them worked for me o_O

I've been read the
docummentation but there's nothing explain how to change it in detail 🙂
Can someone explain this sample for me? I don't get it 😅

CSS:
/* For use in LESS: */
.someIcon {   /* ??? is this '.someicon an example or ready to use?  */     
   <xf:macro                
        template="uix_icons.less"   /* ??? what the relation with uix_icon.less?  */               
        name="content"   /* ??? where to find the name? is it leave tobe default (content)?   */
        arg-icon="account"    /* ??? where to find the 'arg-icon id?   */
     />        
}


Another experiment to change 'Countdown widget icon' (not worked):
CSS:
/* Countdown Widget - put in [I]extra.less[/I] */
[data-widget-key="countdown_me"] h3.block-minorHeader:before {
    display: inline-block;
    padding-right: 0px;
    .m-faBase();
    .m-faContent(@fas fa-hourglass-start fa-spin);
}

Another experiment to change 'Share Page widget icon' (not worked):
CSS:
/* Share Page Widget - put in [I]extra.less[/I] */
[data-widget-key="forum_overview_share_page"] h3.block-minorHeader:before {
    display: inline-block;
    padding-right: 0px;
    .m-faBase();
    .m-faContent(/f1e0 /10f1e0);
}

Did i miss something?
Summon @Babak , @ALiveVam , @TassieNZ , @ELLIO7 , @hexor
read here
 
  • Like
Reactions: mei2020
read here
...
I guess this one will be success for changing 'Share Page Widget Icon' because defaultly its css/ html have 'iconic feature', but not with 'Countdown Widget Icon' the css/ html is different from Xenforo default widgets...

Is there another tips/ tricks to modify the 'Countdown widget icon'?
 
Last edited:
Are you using pro or free? I have the pro version available if you would like it
 

Forum statistics

Threads
78,864
Messages
1,127,907
Members
246,576
Latest member
eqeus
AdBlock Detected

We get it, advertisements are annoying!

However in order to keep our huge array of resources free of charge we need to generate income from ads so to use the site you will need to turn off your adblocker.

If you'd like to have an ad free experience you can become a Babiato Lover by donating as little as $5 per month. Click on the Donate menu tab for more info.

I've Disabled AdBlock