带有 Bootstrap 的 Wicket / 如何使用通过 webjar 提供的字体？

Question

在我的 Wicket（使用 Bootstrap）应用程序中，我将工件 org.webjars:font-awesome:4.6.3 作为传递依赖项。

我想使用此字体通过与页面MyBasePage 关联的 CSS 文件来设置页面样式。

这是HomePage.css的摘录：

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

让客户端可以访问字体的正确方法是什么？

CSS 文件 HomePage.css 通过
PackageResourceReference cssFile = new PackageResourceReference (HomePage.class, "HomePage.css"); 正确嵌入

更新

根据@martin-g 的提示，我对我的代码进行了这些更改

在应用程序中

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

在页面中

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);
    }
}

在 HTML（浏览器）中现在有有效的链接

<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" />

但在 font-awesome.css 中，我猜这些链接无法解析：

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

Answer 1

最简单的方法是将 FontAwesomeCssResourceReference 挂载到一些“不错的 url”，例如在 YourApplication#init() 中：

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

这样就可以在/context-path/css/font-awesome.css 获得。

更新：忽略以上内容！

以下是使它起作用的更改：

在 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);
    }
}

也就是说，您需要做的就是确保在 HomePage.css 之前贡献了 font-awesome.css。 WicketApplication.java 中的自定义代码可以去掉！

Answer 2

我不知道 webjars 的优点是什么。我是这样手动完成的，效果很好：

然后在我的主页中：

   @Override
   public void renderHead(IHeaderResponse response) {
      super.renderHead(response);
      response.render(BootstrapResources.getFontAwesome());
   }