FA Icon for Public Navigation

FA Icon for Public Navigation

Overview Discussion
NeyCruzz

NeyCruzz

Member
NeyCruzz submitted a new resource:

FA Icon for Public Navigation - FA Icon for Public Navigation

Description:
Add FA Icon for Public Navigation

Add this code in extra.less:
Less: 
/* NeyCruzz FA Icon Public Navigation */
&[data-nav-id='home']:before {.m-faContent(@fa-var-house); padding-right: 5px;}
&[data-nav-id='forums']:before {.m-faContent(@fa-var-comment); padding-right: 5px;}
&[data-nav-id='whatsNew']:before {.m-faContent(@fa-var-newspaper); padding-right: 5px;}
&[data-nav-id='members']:before {.m-faContent(@fa-var-user); padding-right: 5px;}...
Click to expand...

Read more about this resource...
 
NeyCruzz said:
NeyCruzz submitted a new resource:

FA Icon for Public Navigation - FA Icon for Public Navigation



Read more about this resource...
Click to expand...
Bonjour,

I added this to extra.less but nothing changed. It's still a "label" icon showing there. Song Prod Forum.

Code: 
[data-nav-id='s_p_forum']:before {.m-faContent(@fa-var-pencil); padding-right: 5px;}

I also found a font awesome I prefered (<i class="fa-solid fa-arrow-up-right-from-square"></i>) but that broken the CSS.

What am I missing?

1c7b79dfdad46081fa54ae6aa3f8dc84.webp
 
creativeforge said:
What am I missing?
Click to expand...
Try this (also adds arrow-up-right)

Code: 
a[data-nav-id="s_p_forum"]:before {
    .m-faContent(@fa-var-external-link) !important;
    margin-right:5px;
}

You might also need the off canvas code, so add this instead

Code: 
a[data-nav-id="s_p_forum"]:before, .offCanvasMenu-linkHolder [data-nav-id="s_p_forum"]:before {
    .m-faContent(@fa-var-external-link) !important;
    margin-right:5px;
}
 
Gemma said:
Try this (also adds arrow-up-right)

Code: 
a[data-nav-id="s_p_forum"]:before {
    .m-faContent(@fa-var-external-link) !important;
    margin-right:5px;
}

You might also need the off canvas code, so add this instead

Code: 
a[data-nav-id="s_p_forum"]:before, .offCanvasMenu-linkHolder [data-nav-id="s_p_forum"]:before {
    .m-faContent(@fa-var-external-link) !important;
    margin-right:5px;
}
Click to expand...
Thank you!!

Adding !important to my initial code actually works. And I had the wrong font awesome code.

Code: 
[data-nav-id='s_p_forum']:before {.m-faIcon(@fa-var-external-link) !important; padding-right: 5px;}

And this works perfectly too. I'm not familiar with "off canvas" code. Why is it preferable?

Code: 
a[data-nav-id="s_p_forum"]:before, .offCanvasMenu-linkHolder [data-nav-id="s_p_forum"]:before {
    .m-faContent(@fa-var-external-link) !important;
    margin-right:5px;
}

So appreciated! :)

Andre
 
Gemma said:
Try this (also adds arrow-up-right)

Code: 
a[data-nav-id="s_p_forum"]:before {
    .m-faContent(@fa-var-external-link) !important;
    margin-right:5px;
}

You might also need the off canvas code, so add this instead

Code: 
a[data-nav-id="s_p_forum"]:before, .offCanvasMenu-linkHolder [data-nav-id="s_p_forum"]:before {
    .m-faContent(@fa-var-external-link) !important;
    margin-right:5px;
}
Click to expand...

Here is what it looks like. :) So clean! (y)


f4138879b54968145a5d9268d2c6c410.webp

e3aefd4580d64dc81af0f3744ff422a3.webp
 
I find the duotone icons a little more visually appealing, the standard icons have a harsher appearance to me. Changed the padding coding to reduce code redundancy and size down form 5px to 3px. Some icons don't take up the same space and may look better with slightly different spacing. In those cases you can append a change directly inline after the font awesome class example: (@fa-var-duotone-members); margin-right: 1px !important;}

Here is a slightly modified css code:

CSS: 
/* XenForo Add FA Icons To Public Navigation Begin */
.p-navEl a:before, .offCanvasMenu-linkHolder a:before, .offCanvasMenu-subList a:before {
    .m-faBase();
    display: inline-block;
    text-align: center;
    margin-right: 3px;
}
/* Main Menu */
&[data-nav-id='home']:before {.m-faContent(@fa-var-duotone-house);}
&[data-nav-id='forums']:before {.m-faContent(@fa-var-duotone-comment);}
&[data-nav-id='whatsNew']:before {.m-faContent(@fa-var-duotone-newspaper);}
&[data-nav-id='members']:before {.m-faContent(@fa-var-duotone-user); margin-right: 1px !important;}
&[data-nav-id='xfrm']:before {.m-faContent(@fa-var-duotone-download);}

/* Public Navigation Subnav Begin*/
/* Forum */
&[data-nav-id='newPosts']:before {.m-faContent(@fa-var-duotone-search-plus);}
&[data-nav-id='findThreads']:before {.m-faContent(@fa-var-duotone-search);}
&[data-nav-id='yourThreads']:before {.m-faContent(@fa-var-duotone-user); margin-right: 1px !important;}
&[data-nav-id='contributedThreads']:before {.m-faContent(@fa-var-duotone-comments);}
&[data-nav-id='unansweredThreads']:before {.m-faContent(@fa-var-duotone-comments);}
&[data-nav-id='watched']:before {.m-faContent(@fa-var-duotone-eye);}
&[data-nav-id='watchedThreads']:before {.m-faContent(@fa-var-duotone-comments);}
&[data-nav-id='watchedForums']:before {.m-faContent(@fa-var-duotone-comments);}
&[data-nav-id='searchForums']:before {.m-faContent(@fa-var-duotone-search);}
&[data-nav-id='markForumsRead']:before {.m-faContent(@fa-var-duotone-eye-slash);}

/* WhatsNew */
&[data-nav-id='featured']:before {.m-faContent(@fa-var-duotone-star);}
&[data-nav-id='whatsNewPosts']:before {.m-faContent(@fa-var-duotone-pencil);}
&[data-nav-id='whatsNewProfilePosts']:before {.m-faContent(@fa-var-duotone-rss);}
&[data-nav-id='whatsNewNewsFeed']:before {.m-faContent(@fa-var-duotone-star);}
&[data-nav-id='dbtShopNewItems']:before {.m-faContent(@fa-var-duotone-shopping-cart);}
&[data-nav-id='xfrmNewResources']:before {.m-faContent(@fa-var-duotone-download);}
&[data-nav-id='latestActivity']:before {.m-faContent(@fa-var-duotone-trophy);}

/* XenForo Resource Manager */
&[data-nav-id='xfrmLatestReviews']:before {.m-faContent(@fa-var-duotone-balance-scale);}
&[data-nav-id='xfrmYourResources']:before {.m-faContent(@fa-var-duotone-user); margin-right: 1px !important;}
&[data-nav-id='xfrmWatched']:before {.m-faContent(@fa-var-duotone-eye);}
&[data-nav-id='xfrmWatchedResources']:before {.m-faContent(@fa-var-duotone-download);}
&[data-nav-id='xfrmWatchedCategories']:before {.m-faContent(@fa-var-duotone-th-large);}
&[data-nav-id='xfrmSearchResources']:before {.m-faContent(@fa-var-duotone-search);}

/* Members */
&[data-nav-id='registeredMembers']:before {.m-faContent(@fa-var-duotone-user-circle);}
&[data-nav-id='currentVisitors']:before {.m-faContent(@fa-var-duotone-user-plus);}
&[data-nav-id='newProfilePosts']:before {.m-faContent(@fa-var-duotone-pencil);}
&[data-nav-id='searchProfilePosts']:before {.m-faContent(@fa-var-duotone-user-secret);}
&[data-nav-id='defaultNewsFeed']:before {.m-faContent(@fa-var-duotone-star);}
&[data-nav-id='defaultLatestActivity']:before {.m-faContent(@fa-var-duotone-trophy);}
/* Public Navigation Subnav END */
/* XenForo Add FA Icons To Public Navigation Begin */
 
Last edited:
You must log in or register to reply here.

Similar threads

mkucuksari
  • Question Question
XF 2.3 Converting FA Icon Code for Widget Template area.
Replies
4
Views
99
mkucuksari
mkucuksari
alternadiv
  • Suggestion Suggestion
Lack of interest Better sorting for public navigation links; use widget placement system
Replies
0
Views
435
alternadiv
alternadiv
Mouth
Fixed Inconsistent HTML title for public navigation tabs
Replies
1
Views
591
XF Bug Bot
XF Bug Bot
Ludachris
  • Question Question
XF 2.1 Font Awesome icon for public navigation?
Replies
17
Views
3K
smozgur
smozgur
Back
Top Bottom