XF 2.2 / 2.3 [cXF] Highlight new menu item

[laurent68]

This is a DIY tutorial to achieve this :

As you can see you can get an icon that changes on hover only on new items just to highlight them a bit more.

Open your extra.less template and add the code :

Spoiler: XF 2.3

Vous devez répondre avant de pouvoir voir le contenu des données cachées.

Spoiler: XF 2.2

Vous devez répondre avant de pouvoir voir le contenu des données cachées.

To edit the icon check class &:before. To change the Font Awesome icon edit the word dot-circle (in above example) with any other icon name.

To change the icon color edit the color property.
To edit icon when hover check class &:hover:before.

Want a Pro icon of a specific style?

Spoiler: XF 2.3

If you want an icon with one of the Font Awesome 5 Pro styles - light, solid or duotone - use the above code like this (example): .m-faContent(@fa-var-duotone-sign-in);. As you can see, you add the style name (in that case duotone) inside the code right after the var-.

Spoiler: XF 2.2

Edit .m-faBase(); and change it to .m-faBase('Pro', @faWeight-solid);, .m-faBase('Pro', @faWeight-regular); or .m-faBase('Pro', @faWeight-light);.

Want a Brand icon?

Spoiler: XF 2.3

In XenForo 2.3 you don't need to specify the Brands icon. Use the code as you would for any other icon.

Spoiler: XF 2.2

Edit .m-faBase(); and change it to .m-faBase('Brands');.

 

XF 2.2 / 2.3  [cXF] Change default FA node icon

XF 2.2 / 2.3  [cXF] Icons in sidenav on Account page

[sucre13]

thank you

 

[XenforoNoob90]

Hmm let's see what this is.