1

I'm new to JavaFX. I'm using the following code to load my local HTML Page which uses Bootstrap, Angular etc.

public class AppLauncher extends Application {
    public static void main(String[] args) {
        System.setProperty("sun.net.http.allowRestrictedHeaders", "true");
        launch(args);
    }

    @Override
    public void start(Stage stage) {
        WebView webview = new WebView();
        webview.getEngine().load(AppLauncher.class.getResource("/dashboard.html").toExternalForm());
        stage.setScene(new Scene(webview));
        stage.show();
    }
}

Since my Java script have XHRs from diffrent domain, I've configured it to allow cross-domain requests. Everything works fine when I run it from my Eclipse. I need to have an executable so I used maven-shade-plugin along with launch4j-maven-plugin. The executable is geting created perfectly and can open my HTML page. But the problem is the UI does not render the font-awesome icons I have in my HTML page (also not from the created jar). I have fa-angle-down, fa-bell-o, fa-search in the page. None of them were displayed. Please see images When running from Eclipse and When running from exe/jar

What is causing it not to render the fa icons when its converted into an executable jar or an exe?

Master Po
  • 1,497
  • 1
  • 23
  • 42
  • I think the problem is with relative font paths in font-awesome.css. `@font-face { src: url('../fonts/fontawesome-webfont.eot?v=4.7.0'); src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), }` Seems the `Java Fx WebView` fails to reach those files when converted into executable(jar/exe). There is no issues if I use font-awesome from CDN. – Master Po Mar 02 '17 at 09:33
  • Still can get what's happening when its converted into an executable jar :( – Master Po Mar 06 '17 at 13:26
  • Maybe https://stackoverflow.com/questions/8923801/how-to-reach-css-and-image-files-from-the-html-page-loaded-by-javafx-scene-web-w can help? – Wim Deblauwe May 30 '18 at 11:01

1 Answers1

1

I had a very similar problem, and yes, as Master Po details above, I think it's due to the FontAwesome CSS referencing font locations that it cannot reach when compiled. I fixed this by adding additional CSS to my webview:

yourWebviewObject.getEngine().setUserStyleSheetLocation("data:,@font-face{font-family:'FontAwesome';src:url('"+getClass().getResource("path/to/fontawesome-webfont.eot").toExternalForm()+"');src:url('"+getClass().getResource("path/to/fontawesome-webfont.eot").toExternalForm()+"') format('embedded-opentype'),url('"+getClass().getResource("path/to/fontawesome-webfont.woff2").toExternalForm()+"') format('woff2'),url('"+getClass().getResource("path/to/fontawesome-webfont.woff").toExternalForm()+"') format('woff'),url('"+getClass().getResource("path/to/fontawesome-webfont.ttf").toExternalForm()+"') format('truetype'),url('"+getClass().getResource("path/to/fontawesome-webfont.svg").toExternalForm()+"?v=4.7.0#fontawesomeregular') format('svg');}");

I took me a while to figure out the above (especially that setUserStyleSheetLocation() can have the data in its own string without requiring an actual CSS file), so I hope it helps someone else.

As a background, I am using hugo to create a static website that I am using for help/documentation within my JavaFX application.

Idea for this approach came from: here

mankind-nil
  • 39
  • 3