How to setup forum nav bar button icon

4632 views
8 years ago
Reply
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
8 years ago
Reply
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 ; 

8 years ago
Reply
This seems better then the way I did it. Great tutorial. I used jquery for mine, but this is more effeciant.
8 years ago
Reply
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. :)
8 years ago
Reply
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!
8 years ago
Reply
Well, the first one will be 1, second button will be 2 and etc..
8 years ago
Reply
Doesn't seem to work anymore :/
8 years ago
Reply
It does, I use it on my forums
7 years ago
Reply
This doesn't seem to be working anymore.
7 years ago
Reply
piss off kimon
7 years ago
Reply
It does work, you just need to put the stuff in the content: parameter in quotation marks.
7 years ago
Reply
dosnt work :/
7 years ago
Reply
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";
}
7 years ago
Reply
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

7 years ago
Reply
[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?

 

7 years ago
Reply
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.
7 years ago
Reply
Doesn't work anymore :/
7 years ago
Reply
? 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 */
}

7 years ago
Reply
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.
7 years ago
Reply
? 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 :/
7 years ago
Reply
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
7 years ago
Reply
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.
7 years ago
Reply
*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