0

The spring boot application has a UI folder that contain all UI code and package management file (package.json, yarn.lock). That folder can completely run itself in port 3000 by doing yarn install and yarn start. The icon from Semantic UI React works fine at that point. And I am using the most common "home" icon so it should be available no matter what. (I import 'semantic-ui-css/semantic.min.css')

But if I wrap my UI under springboot and do "mvn clean install" and "java -jar xxx.jar" to run it in port 8080, all icons become empty rectangle, but all other css layout works fine. Am I possibly missing some config in spring boot or semantic ui react? Or I should download the actual icon and store locally? I have no clue how to debug this..

dailun cheng
  • 23
  • 7

2 Answers2

1

Seems like you need to explicitly exclude font file from being filtered by maven. The answer from postalservice14 works for me.

Answer here: Spring Boot - Font Awesome OTS parsing error: Failed to convert.

dailun cheng
  • 23
  • 7
0

Any time you are taking a regular web application and wrapping it in something like spring-boot, electron, or cordova, some of your file paths may not work correctly for the new platform. Your font files may also not be correct after doing this.

Check your CSS and see how the paths are defined for your icon fonts:

a) If the fonts are located on a CDN, does your packaging application give you access to those web assets? If not, you will need to include the font files in your build and reference them locally.

b) Are they relative paths?

  • Check to see if the fonts are located in the path referenced by your CSS.
  • If so, relative paths may not work in your new platform. You will likely have to compile slightly different CSS for the different environment.
brianespinosa
  • 2,408
  • 12
  • 22
  • Thanks for answering my question. I apply the css by installing the semantic ui css package(https://react.semantic-ui.com/usage#semantic-ui-css-package). I have no control over it and based on the github repo, the css file should be already in the local environment. Maybe I should try using the CDN option instead? – dailun cheng Oct 03 '18 at 16:01
  • If you are using that CSS, the fonts referenced there are indeed the CDN versions. So if you are getting 404 errors on those then your application is not allowing you to access the fonts. I'd recommend you either compile your own CSS where you can locate the files wherever you want, OR you may want to try using this package instead that includes the fonts in the dependency itself. it is not official but my guess is that will have a better chance of working inside of your environment. https://github.com/arthurlacoste/semantic-ui-offline – brianespinosa Oct 03 '18 at 16:04
  • Using the offline css won't solve the problem. However I do notice that the not working version has lots of warning on "OTS parsing error" about converting, WOFF header, decode font, etcs. – dailun cheng Oct 03 '18 at 18:26