MyBB Tutorials

Font Awesome in ModCP,UserCP & Tabs

Submitted by linkzy, , Thread ID: 1107

Thread Closed
linkzy
No pressure, no diamonds
Level:
0
Reputation:
181
Posts:
5.34K
Likes:
341
Credits:
54
05-02-2015, 01:56 PM
This post was last modified: 05-02-2015, 02:43 PM by linkzy
#1
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:

Content locked
This content has been locked. Please login or register in order to unlock it.

Now go back and add this code into modcp.css:
Content locked
This content has been locked. Please login or register in order to unlock it.

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.
| A | v4hl| Addicted | Senpai | Sui | Sensei | H | fdigl |


RE: Font Awesome in ModCP,UserCP & Tabs

Aoki
retired
Level:
83
Reputation:
348
Posts:
7.89K
Likes:
2.3K
Credits:
1.7K
05-02-2015, 02:18 PM
#2
Nice copy&paste.
1

RE: Font Awesome in ModCP,UserCP & Tabs

Blaze
Same shit, different day.
Divine
Level:
0
Reputation:
106
Posts:
1.28K
Likes:
187
Credits:
1.44K
05-02-2015, 02:24 PM
#3
Thanks "Addiction", this will be useful for some guys Wink
Like some, love some, trust none.

[Image: YuwcFg6.png?2]

RE: Font Awesome in ModCP,UserCP & Tabs

linkzy
No pressure, no diamonds
Level:
0
Reputation:
181
Posts:
5.34K
Likes:
341
Credits:
54
OP
05-02-2015, 02:27 PM
#4
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
| A | v4hl| Addicted | Senpai | Sui | Sensei | H | fdigl |


RE: Font Awesome in ModCP,UserCP & Tabs

Blowjob
Closed Account
Level:
0
Reputation:
26
Posts:
2.16K
Likes:
189
Credits:
2.53K
05-02-2015, 02:38 PM
#5
[Image: LbBQLWl.png]

RE: Font Awesome in ModCP,UserCP & Tabs

Fstyle
Novice
Level:
0
Reputation:
0
Posts:
46
Likes:
5
Credits:
86
05-02-2015, 06:07 PM
#6
Well done, thank your spirit, thanks for share it

RE: Font Awesome in ModCP,UserCP & Tabs

5chainz
Closed Account
Level:
0
Reputation:
0
Posts:
30
Likes:
1
Credits:
17
15-10-2015, 04:00 AM
#7
thanks for the share boi

RE: Font Awesome in ModCP,UserCP & Tabs

Herokage
Junior Member
Level:
0
Reputation:
0
Posts:
64
Likes:
2
Credits:
35
16-10-2015, 05:15 PM
#8
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.

RE: Font Awesome in ModCP,UserCP & Tabs

skins20
Novice
Level:
0
Reputation:
0
Posts:
35
Likes:
1
Credits:
3
19-10-2015, 09:23 PM
#9
thanks for share it
goods

RE: Font Awesome in ModCP,UserCP & Tabs

Shimoli
Novice
Level:
0
Reputation:
0
Posts:
23
Likes:
0
Credits:
1
19-10-2015, 10:20 PM
#10
Nice copy and paste, thanks.

Users browsing this thread: 1 Guest(s)