Wro4j, webjars and font-awesome

Question

I need help with wro4j configuration to use font-awesome from webjars. I have the next configuration file:

<?xml version="1.0" encoding="UTF-8"?>
<groups xmlns="http://www.isdc.ro/wro"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://www.isdc.ro/wro wro.xsd">

    <group name="angular-bootstrap">
<!--        <css>classpath:META-INF/resources/webjars/bootstrap/3.3.4/less/bootstrap.less</css> -->
<!--        <css>classpath:META-INF/resources/webjars/bootstrap/3.3.4/less/theme.less</css> -->
<!--        <css>classpath:META-INF/resources/webjars/font-awesome/4.4.0/less/font-awesome.less</css> -->
<!--        <css>classpath:META-INF/resources/webjars/flag-icon-css/0.7.1/less/flag-icon.less</css> -->
        <css>classpath:META-INF/resources/webjars/bootstrap/3.3.4/css/bootstrap.min.css</css>
        <css>classpath:META-INF/resources/webjars/bootstrap/3.3.4/css/bootstrap-theme.min.css</css>
        <css>classpath:META-INF/resources/webjars/font-awesome/4.4.0/css/font-awesome.min.css</css>
        <css>classpath:META-INF/resources/webjars/flag-icon-css/0.7.1/css/flag-icon.min.css</css>
        <css>file:${project.basedir}/src/main/wro/main.less</css>
        <js>webjar:jquery/2.1.1/jquery.min.js</js>
        <js>webjar:angularjs/1.4.4/angular.min.js</js>
        <js>webjar:angularjs/1.4.4/angular-route.min.js</js>
        <js>webjar:angularjs/1.4.4/angular-cookies.min.js</js>
        <js>webjar:angularjs/1.4.4/angular-animate.min.js</js>
        <js>webjar:angular-resource/1.4.5/angular-resource.min.js</js>
        <js>webjar:angular-translate/2.7.2/angular-translate.min.js</js>
<!--        <js>webjar:angular-translate-loader-static-files/2.6.1-1/angular-translate-loader-static-files.min.js</js> -->
        <js>webjar:bootstrap/3.3.4/js/bootstrap.min.js</js>
    </group>

</groups>

But when the html page load, the font characters don't appear. The console doesn't show any error message.

This is my maven configuration for wro4j:

<plugin>
                <groupId>ro.isdc.wro4j</groupId>
                <artifactId>wro4j-maven-plugin</artifactId>
                <version>${wro4j.version}</version>
                <executions>
                    <execution>
                        <phase>generate-resources</phase>
                        <goals>
                            <goal>run</goal>
                        </goals>
                    </execution>
                </executions>

                <configuration>
                    <wroManagerFactory>ro.isdc.wro.maven.plugin.manager.factory.ConfigurableWroManagerFactory</wroManagerFactory>
                    <cssDestinationFolder>${project.build.directory}/generated-resources/static/css</cssDestinationFolder>
                    <jsDestinationFolder>${project.build.directory}/generated-resources/static/js</jsDestinationFolder>
                    <wroFile>${project.build.directory}/wro/wro.xml</wroFile>
                    <extraConfigFile>${basedir}/src/main/wro/wro.properties</extraConfigFile>
                    <contextFolder>${basedir}/src/main/wro</contextFolder>
                </configuration>

                <dependencies>
                    <dependency>
                        <groupId>org.webjars</groupId>
                        <artifactId>jquery</artifactId>
                        <version>2.1.1</version>
                    </dependency>

                    <dependency>
                        <groupId>org.webjars</groupId>
                        <artifactId>angularjs</artifactId>
                        <version>1.4.4</version>
                    </dependency>

                    <dependency>
                        <groupId>org.webjars</groupId>
                        <artifactId>bootstrap</artifactId>
                        <version>3.3.4</version>
                    </dependency>

                    <dependency>
                        <groupId>org.webjars</groupId>
                        <artifactId>font-awesome</artifactId>
                        <version>4.4.0</version>
                    </dependency>

                    <dependency>
                        <groupId>org.webjars</groupId>
                        <artifactId>flag-icon-css</artifactId>
                        <version>0.7.1</version>
                    </dependency>

                    <dependency>
                        <groupId>org.webjars.bower</groupId>
                        <artifactId>angular-resource</artifactId>
                        <version>1.4.5</version>
                    </dependency>

                    <dependency>
                        <groupId>org.webjars</groupId>
                        <artifactId>angular-translate</artifactId>
                        <version>2.7.2</version>
                    </dependency>

                    <dependency>
                        <groupId>org.webjars</groupId>
                        <artifactId>angular-translate-loader-static-files</artifactId>
                        <version>2.6.1-1</version>
                    </dependency>

                </dependencies>
            </plugin>

And my configuration properties file:

#List of preProcessors
preProcessors=cssUrlRewriting,cssImport,lessCssImport
#List of postProcessors
postProcessors=less4j,jsMin,cssMin

Answer 1

Maybe it's too late for you but I had the same problem and solved it with maven plugins.

The problem is that wro4j plugin doesn't care about any font file in webjars dependencies so the fonts aren't available in the end.

First plugin : unpack webjars to ${project.build.directory}/unpacked, webjars listed under the artifactItems node and include all files from directories "fonts" (**/fonts/**/*)

        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-dependency-plugin</artifactId>
            <version>2.10</version>
            <executions>
                <execution>
                    <id>unpack-fonts</id>
                    <phase>generate-resources</phase>
                    <goals>
                        <goal>unpack</goal>
                    </goals>
                    <configuration>
                        <artifactItems>
                            <artifactItem>
                                <groupId>org.webjars</groupId>
                                <artifactId>bootstrap</artifactId>
                                <version>3.2.0</version>
                                <type>jar</type>
                                <overWrite>false</overWrite>
                            </artifactItem>
                            <artifactItem>
                                <groupId>org.webjars</groupId>
                                <artifactId>font-awesome</artifactId>
                                <version>4.5.0</version>
                                <type>jar</type>
                                <overWrite>false</overWrite>
                            </artifactItem>
                        </artifactItems>
                        <includes>**/fonts/**/*</includes>
                        <outputDirectory>${project.build.directory}/unpacked</outputDirectory>
                    </configuration>
                </execution>
            </executions>
        </plugin>

Second plugin : copy fonts files to the generated-resources "default" directory

        <plugin>
            <artifactId>maven-resources-plugin</artifactId>
            <version>2.7</version>
            <executions>
                <execution>
                    <id>copy-fonts</id>
                    <phase>process-resources</phase>
                    <goals>
                        <goal>copy-resources</goal>
                    </goals>
                    <configuration>
                        <outputDirectory>${project.build.directory}/generated-resources/static/fonts</outputDirectory>
                        <resources>
                            <resource>
                                <directory>${project.build.directory}/unpacked/META-INF/resources/webjars/bootstrap/3.2.0/fonts</directory>
                                <includes>
                                    <include>**/*</include>
                                </includes>
                                <filtering>false</filtering>
                            </resource>
                            <resource>
                                <directory>${project.build.directory}/unpacked/META-INF/resources/webjars/font-awesome/4.5.0/fonts</directory>
                                <includes>
                                    <include>**/*</include>
                                </includes>
                                <filtering>false</filtering>
                            </resource>
                        </resources>
                    </configuration>
                </execution>
            </executions>
        </plugin>

In my case, I need bootstrap font files and font-awesome font files so I unpack and copy both of the webjars but you can adapt the configuration for one webjar or more than two.

I have to say that I'm not a newbie nor an expert at maven so my answer could be improved.

Hope this will help somebody. ;)

Straw