Question

我渴望在Primefaces中包含FontAwesome图标，最后擎天柱昨天发布了这个伟大的新版本。 - ＆GT; http://blog.primefaces.org/?p=3004#comment-5422

由Max Dicson整合我们现在应该能够使用它们。

然而，在教程视频中，我无法解决这个问题。

使用PF4.0但JSF 2.1 （视频中唯一的差异）
添加了最后一个maven-FontAwesome.jar - ＆gt; http://mvnrepository.com/artifact/org.webjars/font-awesome/4.0.3
在web.xml文件中添加了mime-types
使用<h:outputStylesheet name="webjars/font-awesome/4.0.3/css/font-awesome.css">

但是无法得到我想要的错误。

有什么想法吗？谢谢！

Answer 1

它似乎已经关闭，但万一有人遇到“^”而不是所需的图标问题。不只是想隐藏“^”，而是要显示实际图像，正如我所理解的那样，最初的问题是。

使用支持FontAwesome开箱即用的最新PrimeFaces JAR，确保下面的列表正确，可能有帮助

在您的web.xml中添加：

<context-param>
    <param-name>primefaces.FONT_AWESOME</param-name>
    <param-value>true</param-value>
</context-param>

在您想要添加FontAwesome图标的* .xhtml中，在head标记之间指向您拥有的JAR的字体非常棒的CSS：
```
<h:outputStylesheet name="webjars/font-awesome/4.4.0/css/font-awesome.css">
```

最后正确引用图标，例如

<p:button outcome="add-user-form" value="Add User" icon="fa fa-user-plus">
     <f:param name="productId" value="10" />
</p:button>

这帮助了我。

干杯

Answer 2

可以使用

删除^

.ui-icon.fa {
     text-indent:0px;
     background-image:none;
}

Answer 3

对于^问题，您可以添加以下CSS样式：

.ui-icon.fa {
    text-indent:0px
}

这会覆盖主要表面.ui-icon style {text-indent:-99999px} .....

就我而言，那个图标看起来很破碎。我在firebug控制台中遇到了404错误（对于woff或ttf来说是NetworkError）。对我来说，以下链接是解决方案：Prevent suffix from being added to resources when page loads

Answer 4

http://www.primefaces.org/showcase/ui/misc/fa.xhtml查看官方演示，你可以找到你应该添加一些的文档，所以请按照说明进行操作。