Font Awesome in ModCP,UserCP & Tabs

by linkzy - 05-02-2015, 01:56 PM
لا إله إلا الله‎
Posts:
6,326
Joined:
Jan 2015
Likes:
296
Credits:
252
Reputation:
162
2 Years of Service
#1
OP
Posted: 05-02-2015, 01:56 PM (This post was last modified: 05-02-2015, 02:43 PM by linkzy.)
Hey
That link wasnt working k bye

How do I use this?

Font Awesome is pretty simple to add to your MyBB forum, it literally takes all of 60 seconds to do so.

Navigate to AdminCP > Templates and styles > Your themes templates > Ungrouped templates > headerinclude, and then add the following code.


PHP Code:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"
There you have it, you can now begin to change your icons to Font Awesome icons. as seen below.

Font Awesome on tabbed menu

First of all, you will need a copy of Omni's tabbed menu plugin for MyBB.

[Image: 753b12ef647ee7c545fcc45269ef5be6.png]

Once you have it installed, go to the Font Awesome icon page -> http://fontawesome.io/icons/ and choose an icon that you want to use.

Let's say I want to use a computer icon, as seen below:


You can see that when I have clicked on my image, I have been provided with a code underneath it. This is what we will be using.

Go to ACP > Forums & Posts > Tabbed Menu, and click edit on the tab you wish to add the icon to.

[Image: 4da94e85cac6a696d1cd33001f3a4e7a.png]

Before the name, we'll add the icon code that we copied before.

It should look like this:


That is it, you can now go and add an icon to every tab you have!

Font Awesome in usercp and modcp


If you want to change all your icons in modcp/usercp to Font Awesome, then use these codes.

Navigate to AdminCP > templates and style > your theme > usercp.css, delete everything, and then add the following:

Please register or login in order to unlock hidden content.

Now go back and add this code into modcp.css:
Please register or login in order to unlock hidden content.

If done correctly, your icons will look like this (modcp example):

[Image: 6052c6ef0c99693164036b1bd30faa1a.png]


You can of course, change the color of the icons to suit your needs etc, but it really is that simple.

I hope you enjoyed this small tut, and I hope I helped you somewhat into knowing the world of Font Awesome!

Regards, Addiction.
| Monopoly- Best forever .. | Nadjib - ;) | Addicted | Senpai | Nyan | Sensei | H | fdigl |
[Image: gZD4Fba.png]

Tropical
19-06-2015, 07:00 AM
dead inside
Posts:
5,055
Joined:
Jan 2015
Likes:
1,339
Credits:
19,210
Reputation:
190
Owner
2 Years of Service
#2
Posted: 05-02-2015, 02:18 PM
Nice copy&paste.
Read the help documents before sending me a message.
I'm not really online on weekends, so expect delays on replies.

Blaze
05-02-2015, 02:23 PM
Same shit, different day.
Staff
Posts:
1,324
Joined:
Jan 2015
Likes:
146
Credits:
1,282
Reputation:
79
Staff Member
2 Years of Service
#3
Posted: 05-02-2015, 02:24 PM
Thanks "Addiction", this will be useful for some guys ;)
Like some, love some, trust none.

[Image: YuwcFg6.png?2]
لا إله إلا الله‎
Posts:
6,326
Joined:
Jan 2015
Likes:
296
Credits:
252
Reputation:
162
2 Years of Service
#4
OP
Posted: 05-02-2015, 02:27 PM
(05-02-2015, 02:18 PM)linkz Wrote: Nice copy&paste.

yeah copy paste thats why at last i put :3


Regards of that user
| Monopoly- Best forever .. | Nadjib - ;) | Addicted | Senpai | Nyan | Sensei | H | fdigl |
[Image: gZD4Fba.png]

Closed Account
Posts:
2,770
Joined:
Jan 2015
Likes:
140
Credits:
1,306
Reputation:
28
2 Years of Service
#5
Posted: 05-02-2015, 02:38 PM
[Image: LbBQLWl.png]
Novice
Posts:
47
Joined:
Feb 2015
Likes:
5
Credits:
84
Reputation:
0
2 Years of Service
#6
Posted: 05-02-2015, 06:07 PM
Well done, thank your spirit, thanks for share it
Closed Account
Posts:
31
Joined:
Sep 2015
Likes:
0
Credits:
17
Reputation:
0
1 Year of Service
#7
Posted: 15-10-2015, 04:00 AM
thanks for the share boi
Junior Member
Supreme
Posts:
68
Joined:
Sep 2015
Likes:
1
Credits:
27
Reputation:
0
1 Year of Service
#8
Posted: 16-10-2015, 05:15 PM
I was under the assumption that you have to use the \f01jk something for it rather than the <i>. Anyways, thanks for this. I loved the outcome in the screenshot. Looks very clean and neat.
Novice
Posts:
36
Joined:
Jun 2015
Likes:
1
Credits:
3
Reputation:
0
2 Years of Service
#9
Posted: 19-10-2015, 09:23 PM
thanks for share it
goods
Novice
Posts:
24
Joined:
Oct 2015
Likes:
0
Credits:
25
Reputation:
0
1 Year of Service
#10
Posted: 19-10-2015, 10:20 PM
Nice copy and paste, thanks.
The last reply on this thread is older than a month. Please do not unnecessarily bump it.
Register an account or login to reply
Create an account
Create a free account today and start posting right away. It only takes a few seconds.
Login
Log into an existing account.
1 Guest(s)