Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
MyBB Font awesome icons help
I use a tutorial on mybb to get this..
What i want is to add my icons there..
[Image: gf947PF.png]
Assuming you're wanting to completely replace the speech bubbles correct?

Go to your global.css and find the following:

.ficons_2 i:before {
    content: "\f086";
.ficons_3 i:before {
    content: "\f086";
.ficons_4 i:before {
    content: "\f086";

Now, where ".ficons_4" - 4 represents the forum id #. Where "content: "\f086";" f086 represents the font awesome icon number.

Search for icons you want to use. Every icon will have a 4-digit unicode to copy and add to your global.css.

Create a new entry for every forum ID you want to change, ideally keeping them in numerical order or it can get out of hand to keep track of. Then replace the "f086" with the unicode of the fontawesome icon you wish to use.

Hope that helps.
Can i add my own icons? By url?
[Image: gf947PF.png]
(01-01-2020, 07:42 PM)Mastersly Wrote: Can i add my own icons? By url?

You can, but most of the themes these days are made with the intent to use exclusively Font Awesome. Looking into it, it was considerably more work to do so, so I stuck with Font Awesome.

You kinda have to reverse engineer the process for adding, which I didn't go through with, so wouldn't be able to help much. See:
How can i add icons like yours..i didn't get that
[Image: gf947PF.png]
(01-02-2020, 06:47 AM)Mastersly Wrote: How can i add icons like yours..i didn't get that

Follow the instructions in Post #2.

If you're having issues with any of those steps, just ask and I will help best I can.
I add the forum ID and the code of the icon but it doesn't change..
.ficons_25 i:before {
content: "\f4ab";}
[Image: gf947PF.png]
Make sure you're modifying the global.css for the theme you are using, not the default MyBB theme.

If there's an error, it usually shows up as a broken character, so it would tell you if you're doing it wrong.
I am in dark theme >>global.css and nothing changes..

How does global.css know the code of the icon? Should i add a link of fontawesome(where i get the icons)
[Image: gf947PF.png]
The 'icons' ar really unicode text characters, invented to help add images to Tweets but keep tweet lengths short. They kinda took off and have been used elsewhere because they're not resource intensive. By using the unicode (4-digit text), you're telling it what to use. Now, a lot of MyBB themes were designed around Font Awesome version 4, and a lot of icons weren't released until Font Awesome Version 5. That MIGHT be an issue, but not a guarantee.

By using the below, you're telling MyBB: Use Font Awesome icon f4ab as the forum icon for the Forum with ID of 25.
.ficons_25 i:before {
content: "\f4ab";

I am unable to get to FontAwesome from work, but if you wanted, I can take a look for you when I get home if you wanted to temporarily bump up my account permissions on your site.

Forum Jump:

Users browsing this thread: 1 Guest(s)