XF 2.0 Setting an icon for a custom navigation button

[iLemon]

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

 

[Ozzy47]

Have a read here, https://xenforo.com/community/threads/add-font-awesome-icons-to-the-navigation.139192/

 

[iLemon]

Have a read here, https://xenforo.com/community/threads/add-font-awesome-icons-to-the-navigation.139192/

Thanks.

I set the navigation Title to:

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

Spoiler: Mobile

The Store icon isn't the same as the others.

 

[Russ]

Maybe contact your style author as they could be approaching it different? Material icons vs font awesome.

 

[iLemon]

Managed to figure it out. For anybody with the same question, here's what I did:

In uix_icons.less, I added:

    <xf:if is="{$icon} == 'store'">content: '@xf-uix_icon_shoppingCart';</xf:if>

(where the identical code is)

And in uix.less, I added:

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

 

[Ozzy47]

Glad you got it figured out for the custom style.

 

[AlBundy]

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