Search code examples
csswicketfont-facewebjars

Wicket with Bootstrap / How to use a font that's provided via webjar?

In my Wicket (with Bootstrap) application, I have the artifact org.webjars:font-awesome:4.6.3 as a transitive dependency.

enter image description here

I want to use this font in for styling my page via the CSS file which is associated to the Page MyBasePage.

This is an excerpt from HomePage.css: 

.banned div::before {
    font-family: FontAwesome, serif;
    content: '\f05e ';
    color: #c00000;
}

What is the correct way to make the font accessible for client ?

The CSS-file HomePage.css is properly embedded via
PackageResourceReference cssFile = new PackageResourceReference (HomePage.class, "HomePage.css");

Update

Based on the hint of @martin-g , I made these changes to my code

In the application

public class WicketApplication extends WebApplication
{
    @Override
    protected void init()
    {
        mountResource("css/font-awesome.css", FontAwesomeCssReference.instance());
    }
}

In the page

public abstract class HomePage extends WebPage
{
    @Override
    public void renderHead(IHeaderResponse response)
    {
        super.renderHead(response);
        CssHeaderItem fontAwesom = CssHeaderItem.forUrl("css/font-awesome.css");
        response.render(fontAwesom);

        PackageResourceReference cssFile = new PackageResourceReference
                (HomePage.class, "HomePage.css");
        CssHeaderItem cssItem = CssHeaderItem.forReference(cssFile);
        response.render(cssItem);
    }
}

In HTML (browser) now there are valid links

<link rel="stylesheet" type="text/css" href="../../css/font-awesome.css" />
<link rel="stylesheet" type="text/css" href="../resource/com.package.HomePage/HomePage-ver-1500642636000.css" />

But in font-awesome.css , these links can't get resolved, I guess:

font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.6.3');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') ...

enter image description here

Solution

  • The easiest way would be to mount the FontAwesomeCssResourceReference to some "nice url", e.g. in YourApplication#init():

    mountResource("css/font-awesome.css", FontAwesomeCssReference.instance());

    This way it will be available at /context-path/css/font-awesome.css.

    Update: Ignore the above!

    Here is the change that makes it working:

    In HomePage.java

    import de.agilecoders.wicket.extensions.markup.html.bootstrap.icon.FontAwesomeCssReference;
public class HomePage extends WebPage
{
    public HomePage(final PageParameters parameters) {
        super(parameters);
        // add all the components here
    }

    @Override
    public void renderHead(IHeaderResponse response) {
        super.renderHead(response);

    // +++++ the relevant part:
        response.render(CssHeaderItem.forReference(FontAwesomeCssReference.instance()));
    // +++++

        PackageResourceReference cssFile = new PackageResourceReference
                (HomePage.class, "HomePage.css");
        CssHeaderItem cssItem = CssHeaderItem.forReference(cssFile);
        response.render(cssItem);
    }
}

    That is, all you need to do is to make sure that font-awesome.css is contributed before HomePage.css. The custom code in WicketApplication.java can be removed!