Font Awesome on Menu and Sub Menus

[djbaxter]

I have some custom links in the main navigation bar, e.g.,

• Forum Rules - links to a sticky post
• New Posts - /whats-new/posts/
• Recent Posts - /whats-new/posts/?skip=true

I haven't been able to figure how to add the CSS in extra.less to add FA icons to these.

Any suggestions?

Update: The examples at the bottom of https://xenforo.com/community/threads/font-awesome-on-menu-and-sub-menus.140211/post-1307309 work.

 

[mcatze]

@djbaxter Take a look here (https://xenforo.com/community/resources/font-awesome-icons-in-navbar-for-2-1.6817/), this is more cleaner with the LESS syntax.

I have some custom links in the main navigation bar, e.g.,

Did you have a Link?

 

[djbaxter]

@djbaxter Take a look here (https://xenforo.com/community/resources/font-awesome-icons-in-navbar-for-2-1.6817/), this is more cleaner with the LESS syntax.

Did you have a Link?

Yes. The examples at the bottom of https://xenforo.com/community/threads/font-awesome-on-menu-and-sub-menus.140211/post-1307309 work.

I may try your suggestion later but for now I don't need FA for submenus, only for main navbar.

 

[ElGran]

How can I add custom icons?

 

[djbaxter]

How can I add custom icons?

XF 2.0 - Replace FA node icon with an image?

How can I replace the FontAwesome node icons with an image for both read and unread forums?

xenforo.com

See post by Chris D at https://xenforo.com/community/threads/replace-fa-node-icon-with-an-image.135695/post-1183162

Add to extra.less template:

/* change forum nodes from FA to icons Chris D */
.node-icon i { display: none; }
.node-icon { background-image: url('styles/default/xenforo/xenforo-favicon.png'); background-repeat: no-repeat; background-position: center; }
.node--read .node-icon { opacity: 0.5; }

Replace styles/default/xenforo/xenforo-favicon.png with an icon of your choice. You can find many free ones at

Download 1,496,000 free icons (SVG, PNG)

Get free icons for graphic design, UI, social media, and mobile. Search for static and animated icons with consistent quality. PNG, SVG, GIF, AE formats.

icons8.com

I found it works best at sizes from 32x32 to 50x50.

 

[ElGran]

Thanks, you're very kind. But that only change forum nodes. Im using this pugin for that.

Unmaintained - Node Icon

Description: Want assign some icons to forums at list, but can't found option for do it? Easy for use addon for set custom Fontawesome icon to your forum nodes help you! Technical description: Extend node class for save icon name. Modify Node...

xenforo.com

I want to add custom icons in menu (navbar).

 

[djbaxter]

See

XF 2.1 - Navigation row text replace with an icon?Or no?

Hi,'m just wondering If I can replace a tab on the navigation raw with an icon.Eg Where it says "Media" ,d like to put a flag or some icon...Is that possible or no?How can I do that?...Thanks

xenforo.com

Specifically https://xenforo.com/community/threa...place-with-an-icon-or-no.187812/#post-1477764

Is that what you mean?

 

[ElGran]

Yes, but with that code I can only add awesome icons, I want to add custom icons.

 

[Starlinkhispano]

Any update of the submenu menu icons for 2.3.11?

 

[Dermot]

Any update of the submenu menu icons for 2.3.11?

If you mean the drop-down menus, you can just use the data nav ID in extra.css.

Like under Forums, for example



This is done just by adding the following in extra.css

// SUBMENUS
[data-nav-id="newPosts"]:before { .m-faIcon(@fa-var-comments); margin-right:5px }
[data-nav-id="findThreads"]:before { .m-faIcon(@fa-var-search); margin-right:5px }
[data-nav-id="yourThreads"]:before { .m-faIcon(@fa-var-user); margin-right:5px }
// END SUBMENUS

 

[Starlinkhispano]

If you mean the drop-down menus, you can just use the data nav ID in extra.css.

Like under Forums, for example

View attachment 341393

This is done just by adding the following in extra.css

Thank you very much for the information, I have been able to implement it with the code now I will only adapt it.

 

[Dermot]

Thanks, you're very kind. But that only change forum nodes. Im using this pugin for that.

Unmaintained - Node Icon

Description: Want assign some icons to forums at list, but can't found option for do it? Easy for use addon for set custom Fontawesome icon to your forum nodes help you! Technical description: Extend node class for save icon name. Modify Node...

xenforo.com

I want to add custom icons in menu (navbar).

Sorry, just seen this, you could do something like..

[data-nav-id="newPosts"]:before{
    content:"";
    display:inline-block;
    width:16px;
    height:16px;
    margin-right:6px;
    background:url('https://xenforo.com/community/data/avatars/s/57/57960.jpg?1701363194') center/contain no-repeat;
}