Font Awesome icons are not showing

Flow
1

I have a Vaadin (version 24.5.5) application with a view called Records, in there I am showing a vaadin grid with some data and I am using this add on https://vaadin.com/directory/component/grid-exporter-add-on to export in a Word the data from the grid. My dependency below:

        <dependency>
            <groupId>org.vaadin.addons.flowingcode</groupId>
            <artifactId>grid-exporter-addon</artifactId>
            <version>2.5.0</version>
        </dependency>

The export works and I get my custom-template Word file, but the export button is not appearing (none of the default buttons are appearing, tried them all).

Screenshot 2025-02-27 at 6.13.16 PM

I can locate the icon when inspecting the page and it’s the far:file-word, so that means that the icon is loaded correctly, right? If I change this in the browser and place for example vaadin:plusthen it’s okay. I’ve tried also other far, fab, fas icon but nothing seems to work.

I can see in my project structure that the files fab.js, far.js and fas.js exist

/src/main/frontend/generated/jar-resources/font-awesome-iron-iconset/far.js)

Also, I tried to add custom link to do the export but then the my custom-template.docx is not being applied to the exported file.

My code for the exporter below:

 GridExporter<RecordDTO> exporter = GridExporter.createFor(recordGrid, "/custom-template.xlsx", "/custom-template.docx");
    exporter.setAutoSizeColumns(true);
    exporter.setExcelExportEnabled(false);
    exporter.setCsvExportEnabled(false);
    exporter.setPdfExportEnabled(false);
    
    Anchor wordLink = new Anchor(exporter.getDocxStreamResource() , "Download Word");
    wordLink.getElement().setAttribute("download", true);
    
    Button downloadButton = new Button("Export to Word", event -> {
        wordLink.getElement().callJsFunction("click");
    });

    exporter.setButtonsAlignment(ButtonsAlignment.LEFT);
    exporter.setTitle("Record");
    exporter.setFileName("Export - " + new SimpleDateFormat("dd_MM_yyyy").format(Calendar.getInstance().getTime()));
    exporter.setFooterToolbarItems(List.of(new FooterToolbarItem(downloadButton), new FooterToolbarItem(wordLink)));

I’ve tried many things in the last 2 weeks and maybe I forget something to give you more info of what I already did.

Can someone help me figure this out cause I don’t know what else to do. Thanks

2

Do you have “com.flowingcode” whitelisted? If not: add it, make a vaadin:dance and start your application afterwards. This should make it work

2 Likes
3

I already had the “com.flowingcode” whitelisted in my application.properties. The issue was the configuration of my the IDE apparently. When I ran ./mvnw spring-boot:run from the terminal, the icon appeared and I was shocked :woman_facepalming: . All this time I was just clicking the :arrow_forward: button to run the application which apparently wasn’t using Maven properly.

Thank you.