Tutorials Add Navigation Icons to custom HTML widgets

[Marks-Man]

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

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

Continue reading...