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

我想使用这个字体来通过与Page 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') ...
 
  
In my Wicket (with Bootstrap) application, I have the artifact org.webjars:font-awesome:4.6.3 as a transitive dependency. 
 
 
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') ...
 

                
最满意答案
                
                    
                        
 最简单的方法是将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中的自定义代码！ 
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!