使用 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 挂载到某些 "nice 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);
    }
}

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

Answer 2

不知道webjars有什么优点。我像这样手动完成它并且效果很好：

然后在我的主页上：

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

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

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

css

wicket

font-face

webjars

更新