使用 PrimeFaces 的 FontAwesome答案

【问题标题】：FontAwesome with PrimeFaces使用 PrimeFaces 的 FontAwesome
【发布时间】：2014-01-29 22:19:08
【问题描述】：

我一直渴望在 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。

有什么想法吗？谢谢！

【问题讨论】：

我也无法让它工作。我得到一个 ^ 图标应该在哪里。但是，我确实通过将他的 h:outputStyleSheet 更改为 <h:outputStylesheet name="webjars/font-awesome/4.0.3/css/font-awesome.css" /> 解决了样式表的 404 错误
查看 stackoverflow.com/questions/18891768/… 了解最新的简单方法

【解决方案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 的 font-awesome 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>

这对我有帮助。

干杯

【讨论】：

【解决方案2】：

可以用 ^ 删除

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

【讨论】：

这越来越好，它正在工作。现在问题似乎得到了解决。但是现在我们面临一个不同的问题（可能 Max 没有解决），那就是按钮对 fa-2x 没有反应。从理论上讲，它没有直接关系，因为开发人员应该在设计中解决按钮的大小问题，但由于图标是矢量的......不过感谢您的回答，我将按照回答关闭它！

【解决方案3】：

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

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

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

在我的情况下，图标看起来坏了。我在 firebug 控制台中遇到 404 错误（woff 或 ttf 的 NetworkError）。对我来说，以下链接是解决方案：Prevent suffix from being added to resources when page loads

【讨论】：

太棒了！这样可行。 ^_^ 现在我可以看到图标了，但是对于内容为空的图标，您仍然可以看到后面的 ^。例如：fa-bug 可以； fa-heart-o 是 NOT_OK。

【解决方案4】：

http://www.primefaces.org/showcase/ui/misc/fa.xhtml查看官方demo，可以看到文档说要添加一些，所以按照说明操作。

【讨论】：