• Report Links
    We do not store any files or images on our server. XenPaste only index and link to content provided by other non-affiliated sites. If your copyrighted material has been posted on XenPaste or if hyperlinks to your copyrighted material are returned through our search engine and you want this material removed, you must contact the owners of such sites where the files and images are stored.
  • Home
  • -
  • New Pastes

Add Navigation Icons to custom HTML widgets

  • Thread starter XMAN
  • Start date Jul 12, 2021
X

XMAN

Well-known member
Joined
Jul 12, 2021
Messages
33,395
Reaction score
249
Points
63
  • Jul 12, 2021
  • #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...
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...
 
Upvote 0 Downvote
You must log in or register to reply here.
Share:
Facebook Twitter Reddit Pinterest Tumblr WhatsApp Email
  • Home
  • -
  • New Pastes
  • Terms and rules
  • Privacy policy
  • Help
  • Home
AMP generated by AMPXF.com
Menu
Log in

Register

  • Home
    • Go Premium
  • Go Premium / Advertise
  • New Ad Listings
  • What's new
    • New posts
    • New Ad Listings
    • Latest activity
  • Members
    • Registered members
    • Current visitors
X

Privacy & Transparency

We use cookies and similar technologies for the following purposes:

  • Personalized ads and content
  • Content measurement and audience insights

Do you accept cookies and these technologies?

X

Privacy & Transparency

We use cookies and similar technologies for the following purposes:

  • Personalized ads and content
  • Content measurement and audience insights

Do you accept cookies and these technologies?