xenForo 2.x.x Navtab menu FontAwesome use of [Deleted]

[Emre]

ByDost submitted a new resource:

xenForo 2.x.x Navtab menu FontAwesome use of - xenForo 2.x.x Navtab menu FontAwesome use of

xenForo 2.x.x Navtab menu FontAwesome use of

Demo;
View attachment 165254

extra.less You just need to add the following codes to your template

/* xFDestek.com - Üst menü iconları - Başlangıç */
.p-navEl [data-nav-id="forums"]:before{font-family:FontAwesome;content:"\f27a";padding-right:5px}
.p-navEl [data-nav-id="whatsNew"]:before{font-family:FontAwesome;content:"\f128";padding-right:5px}
.p-navEl...

Read more about this resource...

 

[Emre]

ByDost updated xenForo 2.x.x Navtab menu FontAwesome use of with a new update entry:

Updated

Updated List:

• Forums
  New posts
  Find threads
  Watched
  Search forums
  Mark forums read
• What's new
  New Post
  New media
  New media comments
  New resources
  New profile posts
  Your news feed
  Latest activity
• Media
  New Media
  New comments
  Your content
  Watched
  Search media
  Mark viewed
• Resources
  Latest reviews
  Your resources
  Watched...

Read the rest of this update entry...

 

[bousaid]

.p-navEl-link{                              
    &:before{padding-right:5px;font-family: FontAwesome;content: "\f29c";}              
    &[data-nav-id="home"]{&:before{content: "\f015";}}
    &[data-nav-id="forums"]{&:before{content: '\f0e6';}}
    &[data-nav-id="whatsNew"]{&:before{content: '\f128';}}
    &[data-nav-id="members"]{&:before{content: '\f0c0';}}
    &[data-nav-id="xfrm"]{&:before{content: '\f019';}}
    &[data-nav-id="xfmg"]{&:before{content: '\f030';}}
    &[data-nav-id="newPosts"]{&:before{content: '\f06d';}}
    &[data-nav-id="findThreads"]{&:before{content: '\f00e';}}
    &[data-nav-id="searchForums"]{&:before{content: '\f002';}}
    &[data-nav-id="markForumsRead"]{&:before{content: '\f070';}}
    &[data-nav-id="whatsNewPosts"]{&:before{content: '\f0f6';}}
    &[data-nav-id="xfrmNewResources"]{&:before{content: '\f019';}}
    &[data-nav-id="whatsNewProfilePosts"]{&:before{content: '\f040';}}
    &[data-nav-id="whatsNewNewsFeed"]{&:before{content: '\f09e';}}
    &[data-nav-id="latestActivity"]{&:before{content: '\f005';}}
    &[data-nav-id="xfrmLatestReviews"]{&:before{content: '\f091';}}
    &[data-nav-id="xfrmYourResources"]{&:before{content: '\f0ed';}}
    &[data-nav-id="xfrmWatched"]{&:before{content: '\f0a7';}}
    &[data-nav-id="xfrmSearchResources"]{&:before{content: '\f002';}}
    &[data-nav-id="currentVisitors"]{&:before{content: '\f234';}}
    &[data-nav-id="newProfilePosts"]{&:before{content: '\f040';}}
    &[data-nav-id="searchProfilePosts"]{&:before{content: '\f21b';}}
}

 

[Emre]

Thank's @bousaid , A different method

 

[gorman]

Hi! Thanks for sharing this, Emre.

I have two questions:

1) Is there a way to have elements of the navigation menu with just an icon and no text?
2) Is there a way to have an icon appear in mobile navigation too? This is in conjunction with question number 1, because if I choose just an icon... and the icon doesn't appear, the menu entry would not be understandable.

Thanks again.

 

[gorman]

Ok, as far as question #2, I found out that adding an equivalent entry in extra.less for each menu entry works (below just an example with one menu entry):

.offCanvasMenu-linkHolder [data-nav-id="latestActivity"]:before{font-family:FontAwesome;content:"\f005";padding-right:3px}

Still don't know how to get an entry without a text title and just an icon, as Xenforo refuses to save it.

 

[Emre]

1) Is there a way to have elements of the navigation menu with just an icon and no text?

Yes.

2) Is there a way to have an icon appear in mobile navigation too? This is in conjunction with question number 1, because if I choose just an icon... and the icon doesn't appear, the menu entry would not be understandable.

I'll post an update soon. For mobile and tablet devices, icons will also be added.

 

[gorman]

Yes.

Would you be so kind as to share? I just need it for a single entry (simulating the old QuickNav functionality). Thank you!

 

[Emre]

Turkiye is always kind.
After you prepare for mobile and tablet devices, I will bring your other request after updating.
Will you wait a moment? I'm writing codes for the source. Thank's.

 

[Emre]

Emre updated xenForo 2.x.x Navtab menu FontAwesome use of with a new update entry:

2.0.6

Icons added for mobile and tablet devices. Demo views added. Good work!

Read the rest of this update entry...

 

[gorman]

Turkiye is always kind.
After you prepare for mobile and tablet devices, I will bring your other request after updating.
Will you wait a moment? I'm writing codes for the source. Thank's.

I saw the update. It helped me in styling some entries of a different class (the simple a[href* ones).
I'll wait for help on "no text" entries. Emre used to be a very strong football player that played for my team (Inter Milan). I remember he was instrumental in your third place in the World Cup some years ago.

 

[Emre]

@gorman , Need to edit URL structure. As I was doing route filter editing, I specified the URL accordingly.
a[href*="/URLuse-Rotafiltre/"]:

 

[gorman]

@gorman , Need to edit URL structure. As I was doing route filter editing, I specified the URL accordingly.
a[href*="/URLuse-Rotafiltre/"]:

Hi! I freely admit my ignorance... I'm not a programmer/designer or anything. I simply selected, as an icon, one of the FontAwesome icons. I put as menu title a simple . (to make it as little visible as possible). I would simply like to hide this .
The menu entry is a node listing of all the forums and subforums, to bring back some sort of QuickNav option, that my users are asking after updating to 2.0.

As such... what you just described might as well be alien language to me. Sorry, Emre.

 

[gorman]

It currently appears like this:



I used "after" instead of "before" but the point is making that small . disappear. And Xenforo refuses to save a navigation menu entry without a title.

 

[Niro]

It is not working for me, before the update, it was working, but now its not.

 

[Emre]

It is not working for me, before the update, it was working, but now its not.

May be due to the route filter. Use URL parameters appropriate to Route Filter.



Sample;
route filter I use;
yeni-mesajlar/konular
default route filter;
find-new/posts

Should be edited;

.offCanvasMenu a[href*="/yeni-mesajlar/konular/"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f05b" }

change;

.offCanvasMenu a[href*="/find-new/post/"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f05b" }

Send site address. I will send sample codes.

 

[gorman]

If anyone was interested in having menu entries with just an icon and no text, I've discovered (a colleague of mine, to be honest ) that while Xenforo refuses to name the entry with a space, it accepts  

On the other hand, there's one thing I don't understand. If I have a navigation menu entry that needs to be clicked to activate a node list below it, in regular desktop mode the whole entry is clickable, while in responsive/mobile mode I need to press the down arrow to show the node list below. How can I have the whole area "touchable"?

Currently the situation is like in the image I attach, for mobile use:



Whereas in desktop use the whole area is clickable:



Edit: the red highlight is there just to show what area is clickable, it was added in an image manipulation program.

 

[gorman]

@Emre do you think I should ask somewhere else about this specific "problem" (areas clickable in mobile menu)? Maybe the styling and customization area? I asked here because I'm not sure if it's something depending on the fontawesome mod or not.

Thank you!

 

[Emre]

@ak38 , This error is irrelevant. Please ask for support by creating a topic.

 

[deslocotoco]

Thanks for this tutorial guys.

Any way for doing this on the links in the footer?