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
6

Sorry for the very late reply, but this work has fallen out of priority. To close this discussion, I’ve created Loading... for the implementation of multiple CSS inside the IconTheme, to be taken on a further roadmap.

Thanks all for participating.