css - 带有 PrimeFaces 的 FontAwesome

Question

我一直渴望在 Primefaces 中包含 FontAwesome 图标，终于 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文件

但无法获得我想要的 fa-bug。

有什么想法吗？谢谢!

Answer 1

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

当这样的事情出现时 [1]:http://i.stack.imgur.com/5GpHZ.jpg

使用开箱即用支持 FontAwesome 的最新 PrimeFaces JAR，确保波纹管正确，可能会有所帮助

1. 在您的 web.xml 中添加:

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

2. 在您想要添加 FontAwesome 图标的 *.xhtml 中，在 head 标签之间指向您拥有的 JAR 的 font-awesome css:

   <h:outputStylesheet name="webjars/font-awesome/4.4.0/css/font-awesome.css">
   

3. 最终正确引用图标，例如

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

这对我有帮助。

干杯