Jump to content
bernhard

How to add FontAwesome Pro to the PW Backend

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...