XenForo Add Navigation Icons to custom HTML widgets

[CR LEAKS]

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

• Check Advanced mode checkbox

Less:

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

---

Step 2 :

• Extra.less
• Replace with your key id

CSS:

.block[data-widget-key="test001"] h3:before {
font-family: 'Font Awesome 5 Pro' ;
content: "\f34e";
width: 1.28571429em;
display: inline-block;
text-align: center;
}