How to add FontAwesome Pro to the PW Backend

[bernhard]

 

EDIT: Just realized that this will set the icon of every field! I'll look into that...

 

Add this to /site/ready.php

if($page->template == 'admin') {
  $config->styles->add("/site/assets/fontawesome/css/all.css");
}

Then you can use all FontAwesome icons in your backend. To set the icon of an Inputfield you need a little hack, because the InputfieldWrapper adds the FA4 prefix automatically. The fix is quite easy:

$wrapper = $field->parent;
$wrapper->setMarkup([
  'item_icon' => "<i class='fad fa-image'></i> ",
]);
$field->icon = 1; // set icon to anything not null

Voila, you can use Duotone icons for your fields:

PS: There's also a module by @Macrura but that didn't work for my usecase. And adding 3 lines in site/ready.php to use an existing folder of FontAwesome is better than installing another module and copying files over...

PS: My approach does of yourse NOT show icons in the GUI of fields and templates. It's a code- or file-based approach that works in hooks and process modules.

 

[bernhard]

Setting the icon markup of the wrapper does not work, because this also affects all following inputfields and always sets the same icon on all inputfields.

This is what I came up with now:

    // add method to set icon of inputfield manually
    $this->addHook("Inputfield::setIcon", function($event) {
      $field = $event->object;
      $name = $field->name;
      $icon = $event->arguments(0);
      $field->parent->addHookAfter('render', function($event) use($name, $icon) {
        $search = " for='Inputfield_$name'>";
        $event->return = str_replace(
          $search,
          $search."<i class='$icon'></i> ",
          $event->return
        );
      });
    });

Usage is even simpler:

$field->setIcon('fad fa-link');