Custom Fontawesome Support

Bagi_Ril

Hi.

In this tutorial I will be explaining how to add Fontawesome Pro icons (any version you want).

Forum

You need to get fa cdn. (Example: <link rel="stylesheet" href="https://pro.fontawesome.com/releases/YOUR_VERSION_HERE/css/all.css" type="text/css">)
Now go to your administration page then navigate to appearance and scroll down until you see custom header and edit it like so

GG! Now you can use latest pro icons on your forum.
_Example of how to use is in admin section. Just keep on reading 😀 _

Admin

Now icons by default are not visible in admin dashboard due to custom options (custom header, custom css, etc.) are not affecting admin page. Now I'll show you how to fix this.

Download FTP software or just use your hosting provider file manager. (In the tutorial I'm using FileZilla as my FTP software)
Connect to your website and navigate to your forum folder
After you locate your forum folder open it and look for extend.php file.
Download the file to your pc and open it in text editing program of your choice. (I recommend Visual Studio Code but it will work in any text editor such as notepad)

After you opened the file in the program copy this code:

<?php

/*
 * This file is part of Flarum.
 *
 * For detailed copyright and license information, please view the
 * LICENSE file that was distributed with this source code.
 */

use Flarum\Extend;

return [
    // Register extenders here to customize your forum!
    (new Extend\Frontend('admin'))
        ->content(function (\Flarum\Frontend\Document $document) {
            $facdn = 'CDN_LINK_HERE';
            $document->head[] = $facdn;
    }),
];

Replace CDN_LINK_HERE with your cdn link. (Same one you put in custom header)
After that save the file and upload it back to your forum folder. (If it asks you something like would you like to overwrite the file just click yes)
Bam! You're done! Now you can also see icons on admin page.

Example of usage

Go to admin page
Pick anything you want that uses fontawesome icons. (user groups, tags, etc.)
After you start with the creation of chosen option go to icon input field and paste information for your icon like so
Choose icon from fontawesome. Make sure you use icons from correct version you used as link cdn

Now paste it in icon input field like so

Now if you done everything correctly icon should appear next to the tag name.

Thank you for reading ❤️

I'm sorry if I added too many usless steps but I want to make sure that everyone can use this tutorials from complete beginners to advanced programmers.

NOTE: You can still use fontawesome v5 icons that are shipped with flarum installation as usual. This tutorial just adds support for more icons

luceos

Bagi_Ril I'd recommend using the Admin version for Forum too. And aren't both the bundled fa5 and the remote fa6 loaded this way? You should probably loop over the head items to drop the links to the fa5 entries.

Thanks so much for this one by the way, many people have wondered the same thing.

Bagi_Ril

luceos

Yeah both fa5 (from flarum) and fa6 (remote/by link) are loaded this way.

No problem I was searching 3 days for any solution and even tried replacing fa5 support from forum files and broke whole forum many times 😆. Now I finally came up with solution to do this without breaking everything.

Darkle

FA 6 will probably be officially released next week, so when https://github.com/components/font-awesome is updated Flarum should start using FA 6 by default. In the FA 6 documentation there is no breaking change so it should be compatible, but I'm not sure if any flarum/core constraint should be updated for that.

SychO

Darkle the package itself follows the exact same fontawesome versioning, so they'll tag it as v6 when it comes out, which is a new major version, it will require bumping up in flarum's dependency version constraint before it can be used.

davwheat

Supporting FontAwesome 6 in core is difficult, since it uses Less features which the (very outdated) Less PHP library we use does not support. As a result, the only way we can implement support is with a second or new styles compiler (probably SCSS), or by manually editing the files to use older syntax.

Editing FA like this isn't something we'd like to do within core, as it makes it much more difficult to update to new Font Awesome versions in the future, so migrating to SCSS or using it alongside Less is our only real choice, unfortunately, which is almost certainly a breaking change.

But such a 'hack' is more acceptable within a Flarum extension, so Blomstra have released an extension to enable Font Awesome 6 Free and Pro support. FA6 Pro is only supported through their kits service, as we can't easily redistribute FA6 Pro within the extension, but I have ideas for how we could let people upload their own copy of FA6 Pro they have downloaded so this isn't a limitation in the future. No promises about when this might be, though.

https://discuss.flarum.org/d/31219-blomstra-font-awesome-6

SychO

Darkle for reference, this answers the situation with FA and the less compiler davwheat