Add Navigation Icons to custom HTML widgets

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

Click to expand...

Check Advanced Mode

<div class="block"{{ widget_data($widget) }}>
<div class="b-container">
<h3 class="b-minorHeader">{$title}</h3>
<div class="b-body b-row">


<b>Sample</b>

</div>
</div>
</div>
Click to expand...

Click to expand...

Extra.less
Replace with your key id

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

Click to expand...

Continue reading...