Jump to content

Font Awesome 5 Pro

Macrura

By Macrura,
in Module/Plugin Development

 Share

Recommended Posts

Macrura Hero Member

Macrura

Posted
Posted

Font Awesome 5 Pro for ProcessWire

At Github: https://github.com/outflux3/FontAwesomePro

I whipped up a font awesome pro module so that i could use those icons in the admin; 

it will be one of those "BYO vendor files", so you'd load your own Font Awesome 5 Pro assets once you buy it (about 1 day left to get the discounted pro license!)...

Just posting this here in case anyone else

...is working on something similar
...already built something like this
...wants to collaborate on it}

The webfont version basically works well in current admin theme but requires a custom css with fontface redefinition to refer to legacy 'fontAwesome' which is used in the admin css.

The svg framework seems to work well, and leaving in the legacy font-awesome means that any icons that can't be replaced by JS are still visible (like :after psuedo classes); SVG framework only works with solid, probably because the new prefixing (fal for light, far for regular..)

This is also going to be interesting for future admin themes, and the new 'regular' style is cute...

59ce52807558f_Modules__ProcessWire__localhost.thumb.jpg.e1466c0e7bb559c16065d62084b2b3e4.jpg

Solid (default):

59ce52a3a0358_Modules__ProcessWire__localhost.thumb.jpg.417c703b693ff3cf48c6c90697e09763.jpg

dashboard example showing more icons:

59ce52d3e7440_Dashboard__ProcessWire__localhost.jpg.6fc3c39cf36a5624e7c06d6fb59d15c5.jpg

SVG framework:

59ce7ebe0fb43_Modules__ProcessWire__localhost.thumb.jpg.06fa13c82ce8db0b545c99ba3f7e3daa.jpg

  • Like 4
  • Thanks 1
Link to comment
Share on other sites
  • 4 weeks later...
Macrura Hero Member

Macrura

Posted
  • Author
Posted

Just a quick update, so this module works fine and if you purchased FontAwesome 5 Pro and need/want to use those icons in the PW admin, this module allows that do be done, and works with default and Reno themes; it doesn't work on UiKit theme yet, see here for the reason  https://github.com/processwire/processwire-requests/issues/120

  • Like 2
Link to comment
Share on other sites
  • 4 weeks later...
Macrura Hero Member

Macrura

Posted
  • Author
Posted

Update - this now works on UiKit theme, but the method of nullifying the default uikit is somewhat ugly - it basically has to replace the font-awesome css file that is hardcode added to the theme with a blank dummy, and then has to add a copy of the original back at the top of the styles; this is because the FAPro5 styles need to come after the core version in order that the new styles and font are applied.

Link to comment
Share on other sites
Robin S Hero Member

Robin S

Posted
Posted
  On 11/19/2017 at 6:26 PM, Macrura said:

this is because the FAPro5 styles need to come after the core version in order that the new styles and font are applied

Expand  

If you want to add a CSS file so that it is linked at the bottom of the list of admin styles and scripts you can use a hook like this: 

$wire->addHookAfter('AdminTheme::getExtraMarkup', function(HookEvent $event) {
    $parts = $event->return;
    $parts['head'] .= '<link rel="stylesheet" href="/path/to/custom.css">';
    $event->return = $parts;
});

 

  • Like 1
Link to comment
Share on other sites
Robin S Hero Member

Robin S

Posted
Posted

It's working for me. Double-check the hook code, or maybe you have some other module or hook interfering? AdminTheme::getExtraMarkup should never return null - even if it's unused it still returns an array. 

$wire->addHookAfter('AdminTheme::getExtraMarkup', function(HookEvent $event) {
    $parts = $event->return;
    $parts['head'] .= '<link rel="stylesheet" href="/site/templates/custom.css">';
    $event->return = $parts;
});

2017-11-20_123139.png.c617456bdb67811bd8342872da56e0b2.png

  • Like 1
Link to comment
Share on other sites
  • 2 months later...
Robin S Hero Member

Robin S

Posted
Posted

Hi @Macrura,

Is this module working with the latest Font Awesome 5 Pro releases? The readme says to copy the Font Awesome files to the module directory and rename the outer folder as "vendor", and I see paths like below in the code: 

$this->config->urls->$name . "vendor/css/fontawesome-pro-core.css?v=$version"

I have an early Release Candidate version of FA Pro 5 that has paths like that, but the recent versions look like this...

2018-01-30_162147.png.58f12b48bbd63db9749b184f8101f2ff.png

...and there is no file included anywhere named "fontawesome-pro-core.css".

Another question: when the module is installed, does it replace the core icon preview with the icons from FA Pro 5?

2018-01-30_163251.png.98df66dcba1357a80924d29559e354ea.png

Link to comment
Share on other sites
Macrura Hero Member

Macrura

Posted
  • Author
Posted

yeah they changed a lot of things since the module was first made; it's been updated to support the latest new folder structure, you only need to now copy the css, js, sprites and webfonts folders from the repo into the vendor folder. it should work then.

not sue about the core icon preview, have not tested it, since i always use selectize.js for the that (and it does work)

  • Like 1
Link to comment
Share on other sites
Robin S Hero Member

Robin S

Posted
Posted

Thanks. Still not sure about adding the Font Awesome files though. Maybe you could spell it out a bit more in the readme?

When it says "css, js, sprites and webfonts folders", which ones exactly? There aren't folders with those names in repo root - it looks like this...

2018-01-31_105248.png.15caa8a7531b5d6329a7f552724dbe77.png

...and there are multiple folders named "css" within the repo structure.

Thanks.

 

Link to comment
Share on other sites
Robin S Hero Member

Robin S

Posted
Posted

Okay, I got the vendor folders sorted - it's the ones in the "on-server" folder, right?

I can see the basic v5 icons but I can't seem to view the new v5 Pro icons. Even with Selectize enabled for the icon select in SelectizeTemplateFieldTags I can't find the "alarm-clock" icons, for instance.

2018-01-31_112103.png.33eda763210c1cea09172d923deabc35.png

2018-01-31_112644.png.d146cc0efc6cc255edc9737a4d28d1e8.png

 

A few other little things:

1. In FontAwesomePro.module, $this->config->urls->$name . "vendor/js/v4-shims{$min}.js?v=$version" should be "$this->config->urls->$name . "vendor/js/fa-v4-shims{$min}.js?v=$version"

2. In the readme/info for SelectizeTemplateFieldTags it could be clearer that the module has a dependency on the JquerySelectize module. The module gives a JS error that can stop the admin interface from loading properly if JquerySelectize is not installed.

 2018-01-31_113541.png.7da9835590cc48bd4afcd3941a39b62a.png

3. It's a little hard to find the JquerySelectize module in the modules directory because it is listed under author "outflux3" instead of "macrura".

 

Link to comment
Share on other sites
Macrura Hero Member

Macrura

Posted
  • Author
Posted
  On 1/30/2018 at 10:37 PM, Robin S said:

Okay, I got the vendor folders sorted - it's the ones in the "on-server" folder, right?

Expand  

Yes

  On 1/30/2018 at 10:37 PM, Robin S said:

1. In FontAwesomePro.module, $this->config->urls->$name . "vendor/js/v4-shims{$min}.js?v=$version" should be "$this->config->urls->$name . "vendor/js/fa-v4-shims{$min}.js?v=$version"

Expand  

thanks for catching that, it is fixed now.

  On 1/30/2018 at 10:37 PM, Robin S said:

2. In the readme/info for SelectizeTemplateFieldTags it could be clearer that the module has a dependency on the JquerySelectize module. The module gives a JS error that can stop the admin interface from loading properly if JquerySelectize is not installed.

Expand  

That's actually not the case, but looks like the latest version wasn't updated to the modules dir; i just upped the version and committed the changes to GH. the module checks for the core version and then only depends on JquerySelectize if less than 3.0.67

SelectizeTemplateFieldTags_info_php.jpg.529b41781ebbb89332f069c29bc91356.jpg

  On 1/30/2018 at 10:37 PM, Robin S said:

3. It's a little hard to find the JquerySelectize module in the modules directory because it is listed under author "outflux3" instead of "macrura".

Expand  

Yeah, i have no idea how that happened; Will try and fix/change at some point..

  On 1/30/2018 at 10:37 PM, Robin S said:

I can see the basic v5 icons but I can't seem to view the new v5 Pro icons. Even with Selectize enabled for the icon select in SelectizeTemplateFieldTags I can't find the "alarm-clock" icons, for instance.

Expand  

The module doesn't effect the listing of icons that is generated by the core; it only replaces the icons; I only use pro icons currently on my dashboard module; but it would be nice to be able to use the icons for fields and templates; i can try and research how to hook in and change those lists.

  • Like 2
Link to comment
Share on other sites
Macrura Hero Member

Macrura

Posted
  • Author
Posted

I'm having troubles adding the new icons to the inputfieldIcon;

that inputfield reads the icon classes from a separate file during construct; the options are stored in a protected var that the inputfield uses for rendering the icon select, and also for getting/setting; this means we can't just hook into render, because even if hooking into render and replace, when you save, it won't recognize the value from the list and then it will knock out the value of the option to blank;

I think the only sensible way to do this is to include a copy of the InputfieldIcon with the module and then provide instructions to go into the inputfield settings and tell it to use that version. Hopefully this module will not be modified in the core very often...

and another problem, getting the list of all the font classes for the new list...

Link to comment
Share on other sites
Robin S Hero Member

Robin S

Posted
Posted
  On 2/1/2018 at 3:00 AM, Macrura said:

I'm having troubles adding the new icons to the inputfieldIcon

Expand  

Yeah, that is difficult.

Instead of including a copy of InputfieldIcon, another approach could be to auto-install a custom inputfield module (e.g. InputfieldIconFaPro). Then hook into the form rendering of ProcessTemplate and ProcessField and remove the existing inputfield, adding InputfieldIconFaPro in it's place with the same name (so it still reads/writes the "icon" property).

  On 2/1/2018 at 3:00 AM, Macrura said:

and another problem, getting the list of all the font classes for the new list...

Expand  

Here are the classes (got them with some regex find/replace in file web-fonts-with-css/scss/_icons.scss):

  Reveal hidden contents

 

  • Like 1
Link to comment
Share on other sites
Macrura Hero Member

Macrura

Posted
  • Author
Posted

thanks for generating that list!

i'm wondering why though the pro is supposed to have 2,316 icons, but this list has 992; and there should be 929 in the new v5 free;

but at least this is a lot more than the core/v4 icons..

Will get back about the hooking into form render to replace inputfield...

Link to comment
Share on other sites
Robin S Hero Member

Robin S

Posted
Posted
  On 2/2/2018 at 11:48 PM, Macrura said:

i'm wondering why though the pro is supposed to have 2,316 icons, but this list has 992;

Expand  

I think they're counting each variation of an icon (solid, light, etc) as a separate icon, but these variations use the same class name. Typical marketing stuff to puff up the numbers.

Maybe the brands font should be loaded by default rather than being optional, because if it isn't loaded it leaves unrendered icons in the list which might confuse users about what the problem is.

2018-02-05_104315.png.d0c25124ca102e8146357733815b4f30.png

  • Like 2
Link to comment
Share on other sites
  • 8 months later...

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
Go to topic listing
×
×
  • Create New...