XF 2.0 Setting an icon for a custom navigation button

iLemon

Member
Hi,

I have added a custom button to the navigation. How do I apply an icon to it? Would like to set @xf-uix_icon_shoppingCart for it.

Regards,
Alex :)
 
Thanks.

I set the navigation Title to:
Code:
<i class="fa fa-shopping-cart fa-large fa-fixed-width" style="padding-right:5px;"></i>Store

It looks fine on desktop but on mobile:
OF9aWIN.jpg

The Store icon isn't the same as the others.
 
Managed to figure it out. For anybody with the same question, here's what I did:

In uix_icons.less, I added:
Code:
    <xf:if is="{$icon} == 'store'">content: '@xf-uix_icon_shoppingCart';</xf:if>
(where the identical code is)

And in uix.less, I added:
Code:
        &[data-nav-id="store"]:before {<xf:macro name="content" template="uix_icons.less" arg-icon="store" />}
(where the identical code is)

'store' being the ID of the navigation link.
 
Hello,

i use Xenforo 2.11 and i want add a SVG-Icon. But only in the mobile Style, not for Desktop-User.
What do i have to change? If i edit the class in "www.mywebsite.de/icon.svg" , nothing is displayed.
I want use various Icons for Underforums.

Many thanks for the help :)

edit

extra.less

.offCanvasMenu-linkHolder [data-nav-id="store"]:before
{
content: "";
display: block;
height: 20px;
width: 20px;
background-size: 20px 20px;
background-image: url("www.mywebsite.de/icon.svg");
background-repeat: no-repeat;
padding-right:5px
}

But the icon is over the name, not left :) hmm
 
Last edited:
Back
Top Bottom