Our Icon - package - fontawesome 6

[haskichasan]

Hi folks,

I have some issue while using package for fontawesome icons. I was reading one old forum regex for fontawesome 6.

While I try to set up my custom settings for fontawesome 6 icons I get this error:

“No icons found in the source file”.

Did anyone had similar issue?

[greystate (Chriztian Steinmeier)]

Hi Haskichasan

I don’t have any experience with this - but I can see a couple of possible instances where that Regular Expression wouldn’t find anything:

1. If the CSS file uses :before instead of ::before (it happens)
2. if the CSS has been compressed and the space before the opening { has been removed

Here’s an updated version you can try, to determine if any of those were the case:

\.(fa-[\w-]+):{1,2}before\s*{

Otherwise, it could of course be that the file can not be read, is empty or something else and unrelated…

Hope that helps,
/Chriztian

[haskichasan]

Hi @greystate ,

Thanks for fast reply, I will try to use that regex, but I think there’s issue with source file..as you wrote maybe it is empty or something else.. but thanks

[greystate (Chriztian Steinmeier)]

Yeah, I didn’t even think of the fact that maybe they changed the CSS significantly for version 6 (Font Awesome, that is).

/Chriztian

[handyhollis]

Did you ever solve this?
I can get fa 5 to work with iconic but fa 6 always has the same error you encountered!

[haskichasan]

Hi @handyhollis ,

No, I didn’t solve for fa v6, I also succeed to manage that with v5.15.4 but with the newest I didn’t, I think the main problem is rules source file*. If I manage to do it, I will let you know

[handyhollis]

Thanks @haskichasan. I will try again today.
Umbraco 16 rc4 didnt work at all as the add package page doesnt even appear.

[handyhollis]

Ive made some progress so sharing in case it helps find the complete solution.
The css no longer uses :before, so ive changed the regex to .(fa-[\w]+)
The back office now finds the icons but does not display them properly in the back office.

[haskichasan]

@handyhollis which file did you use for rules source?

[handyhollis]

@haskichasan I’m finally working
I used all.css for the style css which fixed the missing icons and brands.css for the rules
![A screenshot of a configuration panel for Font Awesome 6 (Brands) on a website, showing settings for Configuration Type, templates, CSS files, and rules for selectors and source files.
Ive had to change the regex to .(fa-[\w-]+) as it was rejecting icons with 2 hyphens

![The image shows a form for adding a package with fields for configuration type, name, backoffice template, frontend template, CSS file, selector, and source file.

Ive also copied brands.css to brand-rules.css so i could remove the fa-brands style at the top which means you can see the icon working on the property page as it shows fa-monero instead of fa-brands.

[haskichasan]

Hi @handyhollis

Good one, thanks for sharing this with us.

[handyhollis]

I had issues with the using the icons in block lists so I’ve had to move the FontAwesome files. I originally copied the entire FA download as a folder under css e.g. /wwwroot/css/fontawesome6 containing its own css and fonts.

When the icons were used inside a blocklist, the font paths were wrong as they were missing the css/fontawesome part, so the fix was to move the font awesome css /webfont files out of /css/Fontawesome6/ to the css and webfonts folders directly under wwwroot and now i can pick the icons within a block list element.

Hope that saves somebody else some pain.
Thanks
Andy