Upgrading FontAwesome 6

Development
1

As stated in the Jira about upgrading Font Awesome, we need to support a way of incorporating the new CSS library inside XWiki (Loading...).

Two problems need to be discussed on how to solve:

  1. Incorporating two or more CSS files that comes with the library;
  2. Update JSTree on the Navigation Pane to use the proper icons, as it is making a copy of the unicodes from FA4 in its own stylesheet;
2

Is it a problem to load multiple CSS? Not sure to see the issue here.

So to my knowledge there’s already some discussions for dropping jstree in the future, @CharpentierLucas opened a thread for discussing that here: Removing the jstree dependency: overhaul of the tree macro
Now it’s probably a long run decision and we certainly need a short term solution for FA.
Maybe we can find a workaround by replacing those icons dynamically with a piece of JS once the tree is loaded?

1 Like
3

Maybe it’s not a problem per se, but what would be the correct way of calling them. Currently, there’s only one being called from the webjar and I remember seeing some discussions about it on the chat.

4

Ok, so I did some more tests on this.

The only way I was able to call multiple CSS was by using a StyleSheetExtension with the imports inside of it:

@import "$services.webjars.url('org.webjars:font-awesome', 'css/fontawesome.min.css')";
@import "$services.webjars.url('org.webjars:font-awesome', 'css/solid.min.css')";
@import "$services.webjars.url('org.webjars:font-awesome', 'css/regular.min.css')";
@import "$services.webjars.url('org.webjars:font-awesome', 'css/v4-shims.min.css')"

Using xwiki.iconset.css ended up loading just the last declared value (v4-shims.min.css)

xwiki.iconset.css = $services.webjars.url('org.webjars:font-awesome', 'css/fontawesome.min.css')
xwiki.iconset.css = $services.webjars.url('org.webjars:font-awesome', 'css/solid.min.css')
xwiki.iconset.css = $services.webjars.url('org.webjars:font-awesome', 'css/regular.min.css')
xwiki.iconset.css = $services.webjars.url('org.webjars:font-awesome', 'css/v4-shims.min.css')

Now, if there is no problem using the StyleSheetExtension then it would work ok.

On jstree we can just update the references on tree.less to the new unicode values (there are only 3 icons). It is a mitigation only but would work in the short term.

5

There is a problem as it cannot be loaded in a closed wiki. Also, if we want to make Font Awesome the default icon theme, we cannot have a StyleSheetExtension there. Give me a few hours of time (e.g., put it on the next roadmap) and I can implement support for having multiple CSS files, I think the syntax you’ve tried could be a possible way to support this.

1 Like