XenForo Add Navigation Icons to custom HTML widgets

Marks-Man

Marks-Man

Loyal Member
Step 1 :

Hi,
Some users are asking why key is not being applied and they are unable to set icons.
Make sure to add widget template correctly otherwise CSS will not be applied to it.
  • Go to widgets add HTML widget:
Set Preferred key in my case test001
Click to expand...
  • Check Advanced mode checkbox
Less: 
/**  Add Navigation Icons to custom HTML widgets @ XNFORO.IR **/
<div class="block"{{ widget_data($widget) }}>
    <div class="block-container">
        <h3 class="block-minorHeader">{$title}</h3>
        <div class="block-body block-row">
       <b>Sample</b>
        </div>
    </div>
</div>
/**  Add Navigation Icons to custom HTML widgets @ XNFORO.IR **/

e0319126a89d2.png



Step 2 :
  • Extra.less
  • Replace with your key id
CSS: 
/**  Add Navigation Icons to custom HTML widgets @ XNFORO.IR **/
.block[data-widget-key="test001"] h3:before {
    font-family: 'Font Awesome 5 Pro' ;
    content: "\f34e";
    width: 1.28571429em;
    display: inline-block;
    text-align: center;
}
/**  Add Navigation Icons to custom HTML widgets @ XNFORO.IR **/

  • Result :
4ef187fb34e33.png
 
You must log in or register to reply here.
  • Tags
    add navigation icons to custom html widgets tips add navigation icons to custom html widgets xenforo add navigation icons to custom html widgets xnforo.ir
    • Back
    Top Bottom