MyBB Tutorials

Font Awesome in ModCP,UserCP & Tabs

Submitted by linkzy, , Thread ID: 1107

Thread Closed
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 |



Users browsing this thread: 4 Guest(s)