Jump to content

How to add FontAwesome Pro to the PW Backend


bernhard
 Share

Recommended Posts

 

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:

RYzUgOI.png

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.

 

  • Like 2
Link to comment
Share on other sites

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');

ZlTHZab.png

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...