XF 2.2 Hide navigation text title "Home" but keep the icon

[Zakhiel]

Hello!
First time asking help. I usually find everything online but I couldn't in this case, maybe i missed it. Sorry if it was somewhere.
Anyway, I would like to hide my navigation text "Home", but keep the icon on its left, leaving only the icon being displayed.



Please keep in mind I have the add-on "[MMO] Navigation tab icons 2.2.0.1", allowing me to add the icon:



Thank you very much for anyone who finds the time to help me out!

 

[TPerry]

Not sure about your request... but you don't need an add-on to add icons in the navigation tabs... simple extra.less edits will do that.



and then you are less dependent upon an add-on that may cease to be supported down the road.

 

[Zakhiel]

Not sure about your request... but you don't need an add-on to add icons in the navigation tabs... simple extra.less edits will do that.

View attachment 272359

and then you are less dependent upon an add-on that may cease to be supported down the road.

Basically, I only want the icon of "Home" to be displayed in the navigation menu. I don't want the text "Home" to be displayed.

Also, if it's not too much to ask, may i also know how you got this working through extra.less? Thank you very much!

 

[TPerry]

Basically, I only want the icon of "Home" to be displayed in the navigation menu. I don't want the text "Home" to be displayed.

Probably won't be that hard... at the worst a template edit. I'm not the best at it, been away from it for a while and just upgraded to 2.2.10 P1

Also, if it's not too much to ask, may i also know how you got this working through extra.less? Thank you very much!

It's really fairly simple, and was given on this site as a resource if I remember correctly.
This is modified to also use them for ShowCase, AMS and Classifieds add-ons by Bob.

.p-navEl a:before, .p-navEl :before,.offCanvasMenu--nav :before {
    .m-faBase();
    display: inline-block;
    text-align: center;
    margin-right:5px;
    border-radius:30px;
    line-height:normal;
}
.p-navEl a[data-nav-id='home']:before {.m-faContent("@{fa-var-home}");}
.p-navEl a[data-nav-id='forums']:before {.m-faContent("@{fa-var-comments}");color: gold;}
.p-navEl a[data-nav-id='whatsNew']:before {.m-faContent("@{fa-var-question}");color: #faf08c;}
.p-navEl a[data-nav-id='members']:before {.m-faContent("@{fa-var-users}");color: cyan;}

.p-navEl a[data-nav-id='xfrm']:before {.m-faContent("@{fa-var-download}");color: #ee5f78;}
.p-navEl a[data-nav-id='xfmg']:before {.m-faContent("@{fa-var-camera}");color: #32e932;}
.p-navEl a[data-nav-id='xa_showcase']:before {.m-faContent("@{fa-var-planet-ringed}");color: #db52db;}
.p-navEl a[data-nav-id='xa_ams']:before {.m-faContent("@{fa-var-pencil}");color: orange;}
.p-navEl a[data-nav-id='xa_cas']:before {.m-faContent("@{fa-var-dollar-sign}");color: #04cf04;}
.offCanvasMenu--nav a[data-nav-id='xa_cas']:before {.m-faContent("@{fa-var-dollar-sign}");}
/* ShowCase Subnav */
.p-navEl a[data-nav-id='xa_scNewItems']:before {.m-faContent("@{fa-var-moon-stars}");}
.p-navEl a[data-nav-id='xa_scNewComments']:before {.m-faContent("@{fa-var-comments}");}
.p-navEl a[data-nav-id='xa_scYourContent']:before {.m-faContent("@{fa-var-user}");}
.p-navEl a[data-nav-id='xa_scLatestContent']:before {.m-faContent("@{fa-var-sparkles}");}
.p-navEl a[data-nav-id='xa_scYourItems']:before {.m-faContent("@{fa-var-user}");}
.p-navEl a[data-nav-id='xa_scWatchedContent']:before {.m-faContent("@{fa-var-eye}");}
.p-navEl a[data-nav-id='xa_scSearchItems']:before {.m-faContent("@{fa-var-search}");}
.p-navEl a[data-nav-id='xa_scMarkRead']:before {.m-faContent("@{fa-var-eye-slash}");}
.p-navEl a[data-nav-id='xaScWhatsNewNewShowcaseItems']:before {.m-faContent("@{fa-var-glasses}");}
.p-navEl a[data-nav-id='xaScWhatsNewShowcaseComments']:before {.m-faContent("@{fa-var-moon-stars}");}

/* Classified Ads SubNav */
.p-navEl a[data-nav-id='xa_casNewAds']:before {.m-faContent("@{fa-var-moon-stars}");}
.p-navEl [data-nav-id='xa_casLatestContent']:before {.m-faContent("@{fa-var-sparkles}");}
.p-navEl a[data-nav-id='xa_casYourContent']:before {.m-faContent("@{fa-var-user}");}
.p-navEl a[data-nav-id='xa_casWatchedContent']:before {.m-faContent("@{fa-var-eye}");}
.p-navEl a[data-nav-id='xa_casSearchAds']:before {.m-faContent("@{fa-var-search}");}
.p-navEl a[data-nav-id='xa_casMarkRead']:before {.m-faContent("@{fa-var-eye-slash}");}
.p-navEl a[data-nav-id='xaCasWhatsNewNewCasAds']:before {.m-faContent("@{fa-var-dollar}");}
/* AMS Subnav */
.p-navEl a[data-nav-id='xa_amsNewArticles']:before {.m-faContent("@{fa-var-moon-stars}");}
.p-navEl a[data-nav-id='xa_amsNewComments']:before {.m-faContent("@{fa-var-comments}");}
/*.p-navEl a[data-nav-id='xa_scLlatestReviews']:before {.m-faContent("@{fa-var-trophy}");}*/
.p-navEl a[data-nav-id='xa_amsYourContent']:before {.m-faContent("@{fa-var-user}");}
.p-navEl a[data-nav-id='xa_amsWatchedContent']:before {.m-faContent("@{fa-var-eye}");}
.p-navEl a[data-nav-id='xa_amsSearchArticles']:before {.m-faContent("@{fa-var-search}");}
.p-navEl a[data-nav-id='xa_amsMarkRead']:before {.m-faContent("@{fa-var-eye-slash}");}
.p-navEl a[data-nav-id='xa_amsSeries']:before {.m-faContent("@{fa-var-book}");}
.p-navEl a[data-nav-id='xaAmsWhatsNewArticleComments']:before {.m-faContent("@{fa-var-megaphone}");}
.p-navEl a[data-nav-id='xaAmsWhatsNewNewArticles']:before {.m-faContent("@{fa-var-book}");}

/* Forums Subnav*/
.p-navEl a[data-nav-id='newPosts']:before {.m-faContent("@{fa-var-search-plus}");}
.p-navEl a[data-nav-id='findThreads']:before {.m-faContent("@{fa-var-search}");}
.p-navEl a[data-nav-id='searchForums']:before {.m-faContent("@{fa-var-search}");}
.p-navEl a[data-nav-id='watched']:before {.m-faContent("@{fa-var-eye}");}
.p-navEl a[data-nav-id='markForumsRead']:before {.m-faContent("@{fa-var-eye-slash}");}
/* WhatsNew Subnav */
.p-navEl a[data-nav-id='whatsNewPosts']:before {.m-faContent("@{fa-var-pencil}");}
.p-navEl a[data-nav-id='whatsNewProfilePosts']:before {.m-faContent("@{fa-var-rss}");}
.p-navEl a[data-nav-id='whatsNewNewsFeed']:before {.m-faContent("@{fa-var-star}");}
.p-navEl a[data-nav-id='xfmgWhatsNewNewMedia']:before {.m-faContent("@{fa-var-images}");}
.p-navEl a[data-nav-id='xfmgWhatsNewMediaComments']:before {.m-faContent("@{fa-var-comments}");}
.p-navEl a[data-nav-id='xfrmNewResources']:before {.m-faContent("@{fa-var-download}");}
.p-navEl a[data-nav-id='latestActivity']:before {.m-faContent("@{fa-var-trophy}");}
/* Media Gallery Subnav */
.p-navEl a[data-nav-id='xfmgNewMedia']:before {.m-faContent("@{fa-var-images}");}
.p-navEl a[data-nav-id='xfmgNewComments']:before {.m-faContent("@{fa-var-comments}");}
.p-navEl a[data-nav-id='xfmgAddMedia']:before {.m-faContent("@{fa-var-plus-square}");}
.p-navEl a[data-nav-id='xfmgYourContent']:before {.m-faContent("@{fa-var-user}");}
.p-navEl a[data-nav-id='xfmgWatchedContent']:before {.m-faContent("@{fa-var-eye}");}
.p-navEl a[data-nav-id='xfmgSearchMedia']:before {.m-faContent("@{fa-var-search}");}
.p-navEl a[data-nav-id='xfmgMarkViewed']:before {.m-faContent("@{fa-var-eye-slash}");}
/* Resource Manager Subnav */
.p-navEl a[data-nav-id='xfrmLatestReviews']:before {.m-faContent("@{fa-var-balance-scale}");}
.p-navEl a[data-nav-id='xfrmYourResources']:before {.m-faContent("@{fa-var-user}");}
.p-navEl a[data-nav-id='xfrmWatched']:before {.m-faContent("@{fa-var-eye}");}
.p-navEl a[data-nav-id='xfrmSearchResources']:before {.m-faContent("@{fa-var-search}");}
/* Home sub-nav */
.p-navEl a[data-nav-id='defaultNewsFeed']:before {.m-faContent("@{fa-var-newspaper}");}
.p-navEl a[data-nav-id='defaultLatestActivity']:before {.m-faContent("@{fa-var-satellite-dish}");}
.p-navEl a[data-nav-id='defaultYourProfile']:before {.m-faContent("@{fa-var-pencil}");}
.p-navEl a[data-nav-id='defaultYourAccount']:before {.m-faContent("@{fa-var-user-astronaut}");}
.p-navEl a[data-nav-id='defaultLogOut']:before {.m-faContent("@{fa-var-hand-spock}");}
/* Members Subnav */
.p-navEl a[data-nav-id='registeredMembers']:before {.m-faContent("@{fa-var-user-astronaut}");}
.p-navEl a[data-nav-id='currentVisitors']:before {.m-faContent("@{fa-var-user-plus}");}
.p-navEl a[data-nav-id='newProfilePosts']:before {.m-faContent("@{fa-var-pencil}");}
.p-navEl a[data-nav-id='searchProfilePosts']:before {.m-faContent("@{fa-var-user-secret}");}

 

[PASS]

Basically, I only want the icon of "Home" to be displayed in the navigation menu. I don't want the text "Home" to be displayed.

Also, if it's not too much to ask, may i also know how you got this working through extra.less? Thank you very much!

Edit phrase: nav.home

Remove the Home text and save.

 

[Paul B]

That will work but it will also remove the text for the breadcrumb and result in an orphaned > .

 

[Mr Lucky]

No addon needed

Set the navigation title in Public Navigation, e.g. for home:

<i class="fa fa-home" aria-hidden="true"></i> <span class="u-srOnly">Home</span>

The word home will be hidden but breadcrumbs will work

 

[Zakhiel]

No addon needed

Set the navigation title, e.g. for home:

<i class="fa fa-home" aria-hidden="true"></i> <span class="u-srOnly">Home</span>

The word home will be hidden but breadcrumbs will work

Hello!

I cannot edit the navigation title or id:


Did you mean elsewhere?
Thanks!

 

[TPerry]

Did you mean elsewhere?

Odds are he meant in EXTRA.less

BTW, in my example code, you can colorize any of those icons simply by using a color:cyan; between the last ; and closing bracket.
I've added a light blue to all my sub-nav options.

 

[Zakhiel]

Odds are he meant in EXTRA.less

BTW, in my example code, you can colorize any of those icons simply by using a color:cyan; between the last ; and closing bracket.
I've added a light blue to all my sub-nav options.

View attachment 272383

Well I wasn't very convinced about placing it in extra.less, but i just tried, to no avail.

 

[TPerry]

Well I wasn't very convinced about placing it in extra.less, but i just tried, to no avail.

Be sure you are on the right style... I just made a big boo-boo by being on the wrong style....luckily I already had another tab open for that styles extra.less also... so was able to cut/paste my original stuff back in over the modified.

 

[Mr Lucky]

I cannot edit the navigation title or id:

Odds are he meant in EXTRA.less

No, I meant in ACP > Setup > Public navigation

You need to enable development mode in config.php, then you can edit it

$config['development']['enabled'] = true;

No need to do anything in extra.less

 

[TPerry]

No, I meant in Setup > Public navigation

You need to enable development mode in config.php, then you can edit it

$config['development']['enabled'] = true;

No need to do anything in extra.less

It does help to clarify exactly where code needs to go when you give an example..
As I originally stated, felt it would probably be a template edit.

 

[Zakhiel]

No, I meant in ACP > Setup > Public navigation

You need to enable development mode in config.php, then you can edit it

$config['development']['enabled'] = true;

No need to do anything in extra.less

Thank you it worked just fine!

 

[Salamanca]

No addon needed

Set the navigation title in Public Navigation, e.g. for home:

<i class="fa fa-home" aria-hidden="true"></i> <span class="u-srOnly">Home</span>

The word home will be hidden but breadcrumbs will work

Hey!
for some reason it does not work for me.

I've set this for Title for the Home navigation entry:

<i class="fa fa-home" aria-hidden="true"></i> <span class="u-srOnly">Home</span>

But text continues to be displayed, and it's the translated text in my language.
I've tested it in both ui.x and default xenforo style.

any ideas?

Thanks
Alex

 

[Mr Lucky]

any ideas?

It doen't work on 2.3 see:

Font awesome icons 2.3 - categories, nodes, prefixes, phrases, templates etc...

Sep 19, 2024

A general guide to using Font Awesome icons in xenforo 2.3

• Mr Lucky
• font awesome
• XenForo tips & guides [2.x]