How to setup forum nav bar button icon

4632 views
Want forum button icons? Sorta like these?



I can help! It is easy..

First. In your Developer Code you will have to create the new/updated css element for each button you wish to edit..

Using this little bit of css magic.. 
.navbar-left-forum li:nth-child(X) a:before {
                font: normal normal normal 14px/1 FontAwesome;
                content: \Y;
 }

x is the button number you wish to edit in the navbar... 
y is the unicode for the font awesome icon you wish to add before the button...( yes, keep the \ before the unicode )

You can find the unicode on http://fontawesome.io/icons/ by following the steps bellow. 



Click on the icon you wish to use...




If you still need help contact me on my website.. https://www.lsdroleplay.com/ or teamspeak... ts.lsdroleplay.com
Winner x 2
For the space between the icon one way to overcome the issue is by putting this next to the fa Unicode in content  ( without the space... )
 & nbsp ; 

This seems better then the way I did it. Great tutorial. I used jquery for mine, but this is more effeciant.
tasid said previously:

This seems better then the way I did it. Great tutorial. I used jquery for mine, but this is more effeciant.

Thanks for the feedback. :)
This maybe the worlds stupidest question....

But how do I find the Navbar's Button 'number'?

Chromes Inspect only shows the 'page name' which doesn't work and I've tried simply 1,2 or 3 etc...

Thanks in advanced!
Well, the first one will be 1, second button will be 2 and etc..
Doesn't seem to work anymore :/
It does, I use it on my forums
This doesn't seem to be working anymore.
piss off kimon
It does work, you just need to put the stuff in the content: parameter in quotation marks.
dosnt work :/
Yes its works, It didn't work for me the first time but I figured it out :) here:

.navbar-left-forum li:nth-child(6) a:before {
                font: normal normal normal 14px/1 FontAwesome;
                content: "\f234";
}
Nosrac24? said previously:

Yes its works, It didn't work for me the first time but I figured it out :) here:

.navbar-left-forum li:nth-child(6) a:before {
                font: normal normal normal 14px/1 FontAwesome;
                content: \f234;
}

I got it to work but how do i edit the deisgn of the nav bar to look like the one in the picutre with the white line going along the top

[LSDRP] Kyle G. said previously:

Want forum button icons? Sorta like these?



Okay 2 questions;

1: How can I make it so theres spaces between the icon it self, and the button name, because myn at the moment looks a bit silly:
I tried just adding a space after the simple it didn't work.

2: Is there anyway to make a custom van bar on this forums or is that un-able to do?


 

I'd contact Pixyte, He's more about the Nav bar stuff than I am and he's way better at it than I am :). Yes it is possible.
Doesn't work anymore :/
? ConnorMeister said previously:
[LSDRP] Kyle G. said previously:

Want forum button icons? Sorta like these?



Okay 2 questions;

1: How can I make it so theres spaces between the icon it self, and the button name, because myn at the moment looks a bit silly:
I tried just adding a space after the simple it didn't work.

2: Is there anyway to make a custom van bar on this forums or is that un-able to do?

Just adding a space won't work in CSS and HTML since it reads a blank character (ie. a space) as whitespace. What you should do is add " " to denote a space (without the quotes).

Xeno, it does work. If people here, including myself, have gotten it to work using this method, then it DOES work. Here's the basic code:
.navbar-left-forum li:nth-child(1) a:before { /* 1 is the first child in the nav bar parent, can be changed to each subsequent child */
    font: normal normal normal 14px/1 FontAwesome; /* sizing the icon */
    content: "\f015 "; /* the unicode for the icon you want to use, in this case the house icon to denote homepage, and the non-breaking space character   to add a space between the text and icon */
}

It parsed what I wanted to say about how to add a space. Look up non-breaking space, or alternatively add -&-n-b-s-p-;- and remove all the hyphens.
? A????? said previously:

? ConnorMeister said previously:
[LSDRP] Kyle G. said previously:

Want forum button icons? Sorta like these?



Okay 2 questions;

1: How can I make it so theres spaces between the icon it self, and the button name, because myn at the moment looks a bit silly:
I tried just adding a space after the simple it didn't work.

2: Is there anyway to make a custom van bar on this forums or is that un-able to do?

Just adding a space won't work in CSS and HTML since it reads a blank character (ie. a space) as whitespace. What you should do is add   to denote a space (without the quotes).

Xeno, it does work. If people here, including myself, have gotten it to work using this method, then it DOES work. Here's the basic code:
.navbar-left-forum li:nth-child(1) a:before { /* 1 is the first child in the nav bar parent, can be changed to each subsequent child */
    font: normal normal normal 14px/1 FontAwesome; /* sizing the icon */
    content: \f015 ; /* the unicode for the icon you want to use, in this case the house icon to denote homepage, and the non-breaking space character   to add a space between the text and icon */
}


.navbar-left-forum li:nth-child(6) a:before {
                font: normal normal normal 14px/1 FontAwesome;
                content: "\f0e3 ";
}

.navbar-left-forum li:nth-child(1) a:before {
                font: normal normal normal 14px/1 FontAwesome;
                content: "\f016 ";
}

.navbar-left-forum li:nth-child(2) a:before {
                font: normal normal normal 14px/1 FontAwesome;
                content: "\f1b6 ";
}

.navbar-left-forum li:nth-child(3) a:before {
                font: normal normal normal 14px/1 FontAwesome;
                content: "\f0c0 ";
}

.navbar-left-forum li:nth-child(4) a:before {
                font: normal normal normal 14px/1 FontAwesome;
                content: "\f0d6 ";
}

.navbar-left-forum li:nth-child(5) a:before {
                font: normal normal normal 14px/1 FontAwesome;
                content: "\f233 ";
} I did it but doesnt work :/
add this:

}

.navbar-left-forum li:nth-child(1) a:before {
                font: normal normal normal 14px/1 FontAwesome;
                content:\f234 ";



its work for me
@? ConnorMeister

if its still dosent work:

you need to add this
after the unicode
You are making it confusing just do this...

(spaced navbar icons)

CSS Code: 

.navbar-left-forum li:nth-child(1) a:before {

                font: normal normal normal 14px/1 FontAwesome;

                content: " \f015& nbsp ;";


delete the spaces between & and nbsp also delete the spaces for the p and the semicolon
Adding that will space out each icon for you, simple.
*CLOSING THREAD*

Due to this thread having several replies and in my opinion to someone who actually doesn’t know what to do won’t know who’s post to follow. This will be closed and you can contact the original thread creator and if all fails our support team. 
Thanks
Reply