CODEWITHSUNDEEP
javacssreactjsspring-bootsemantic-ui-react
dailun cheng
dailun cheng

Reputation: 23

Semantic UI React icon show as empty rectangle when wrap in spring boot

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..

Upvotes: 0

Views: 1537

Answers (2)

dailun cheng
dailun cheng

Reputation: 23

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.

Upvotes: 1

brianespinosa
brianespinosa

Reputation: 2408

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.

Upvotes: 0

Related Questions