FontAwesome与PrimeFaces

Question

我渴望将FontAwesome图标包含在Primefaces中，最后Optimus昨天发布了这个很棒的新功能。 -> http://blog.primefaces.org/?p=3004#comment-5422

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

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

使用PF4.0但JSF 2.1 （视频中唯一的差异）
添加了最后一个maven-FontAwesome.jar - > 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">调用相关的css文件<h:outputStylesheet name="webjars/font-awesome/4.0.3/css/font-awesome.css">

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

任何想法？ 谢谢！

Answer 1

似乎已经关闭，但是以防万一有人遇到“ ^”问题而不是所需的图标。 我不仅想隐藏“ ^”，而且要显示实际的图像，因为这是我最初理解的问题。

当出现这种情况时[1]： http : //i.stack.imgur.com/5GpHZ.jpg

开箱即用使用支持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
}

这会覆盖primefaces .ui-icon style {text-indent:-99999px} .....

就我而言，那个图标看起来很破碎。 我在Firebug控制台中遇到404错误（woff或ttf为NetworkError）。 对我来说，以下链接是解决方案：防止在页面加载时将后缀添加到资源

Answer 4

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