Make "cb.faselect" work with FontAwesome 6 (Pro)

ContentBlocks
#1

Hi modMore family,

I am using “FontAwesome-Select for CB” for many years now, but was stuck with FA Version 4.
My editors started an “old-icons-are-wack”-rebellion, so I started my icon-revolution with the goal to use FA Version 6 and at best the Pro-Version.

To get it to work with the FA 6 Free-Version, isn’t a big deal:

  • One has to update the faselect.cssUrl in the system-settings, to let’s say “https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.css”
  • Add the property regexSuffix to the FASelect-Plugin with the value of ::before
  • Edit the FASelect-Plugin:
    • After the $regexPrefix = -line add
      $regexSuffix = $modx->getOption('regexSuffix', $scriptProperties, ':before');
    • In the line with $regex = add the suffix, like:
      $regex = "/\." . $regexPrefix . "([\w-]*)" . $regexSuffix . "/";
  • And finally delete the faselectinputoptions.json file inside the components assets-directory to force regeneration of the list

This (and the upcoming) method omits the brand-icons, with which I’m fine for my use-case.

  • If someone would only want the brand icons, the cssUrl should point to the brands.css and I also think the suffix is only :before
  • If someone would want both icon-sets (icons+brands) you’d currently would have to either duplicate the complete extra and call it something like cb.faselect-brands and configure it accordingly, or provide the plugin with two CSS-files and let it scrape both of them

To get it to work with the FA 6 Pro-Version, is a little different:

As the pro-version isn’t freely available, you first need the license for it.
After paying up and being logged into fontawesome.com, you can download the pro-version.

Now that you have the download, grab your relevant CSS-file, put it somewhere accessible to the FASelect-Plugin, update the faselect.cssUrl to point to the path and … wait.

The problem was/is, that the current version of cb.faselect expects the cssUrl to be an external publicly available real URL. And of course you could just paste the correct URL and it would work.

But in my case I wanted it to point to a root-relative path (where my frontend-build-process puts this css-file / and by using a relative path I can use the same setting for different websites), and I could imagine that someone might want to use something like [[++assets_path]] inside the cssUrl, so I created this pull-request:

By the time you’re reading this, the PR might be merged.
You could also fall-back to my fork:

I hope this might help someone.

Happy Coding :heart:

1 Like