PrimeFaces 图标未在 commandButton 上呈现答案

【问题标题】：PrimeFaces icons not render on the commandButtonPrimeFaces 图标未在 commandButton 上呈现
【发布时间】：2015-04-24 15:26:30
【问题描述】：

我正在尝试使用带有 JSF+PrimeFaces 的字体很棒的图标。我添加到我的 pom.xml 文件 webjars 依赖项：

 <groupId>org.webjars</groupId>
 <artifactId>font-awesome</artifactId>

我还有我的自定义 css 文件：

body{
    background-image: url("#{resource['images/loginBackground.jpg']}");
    background-size: 100%;
    font-family: 'Belleza', sans-serif;
    font-size: 16px;
}

我以这种方式将css的资源添加到我的页面（.xhtml）中：

  <h:outputStylesheet library="css" name="login.css"/>
    <h:outputStylesheet library="webjars" name="font-awesome/4.3.0/css/font-awesome-jsf.css"/>

但不幸的是，当我在 commandButton 组件中设置图标 css 类时：

<p:commandButton icon="fa fa-sign-in" id="submit" value="Login" ajax="false"/>

图标没有显示在我的按钮上。

我的其他设置（web.xml）：

  <context-param>
        <param-name>primefaces.THEME</param-name>
        <param-value>none</param-value>
    </context-param>

    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <!-- MAPPING SECTION -->
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.xhtml</url-pattern>
    </servlet-mapping>

库版本：

JSF 2.2
PrimeFaces 5.1
Font-Awesome 4.3.0-1

【问题讨论】：

图标一般不会呈现在commandButton上吗？任何网络 404 的？
不存在404错误所有资源都已加载。
@Kukeltje 问题已解决。
添加.ui-icon { text-indent: 0; }也可以解决问题
@Kukeltje 在我的 css 文件中？这不起作用。

标签： css jsf jsf-2 primefaces font-awesome

【解决方案1】：

您应该下载 primeicons 项目并将其添加到您的项目中。 primeicons 项目：https://github.com/primefaces/primeicons .

然后将此链接添加到您的页面中：

<link rel="stylesheet" href="primeicons-master/primeicons.css" />

因此将加载 primefaces 图标。

【讨论】：

【解决方案2】：

只需添加 web.xml 代码：

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

然后像这样添加你的命令按钮：

<p:commandButton icon="fa fa-fw fa-pencil" value="Update" />

看看 www.primefaces.org/showcase/ui/misc/fa.xhtml

【讨论】：

不是最好的建议：github.com/primefaces/primefaces/issues/4778 像 OP 一样使用 webjar 是更面向未来的方法

【解决方案3】：

就我而言，我的问题是与我的主题和字体颜色发生冲突。我可以把它放在我的 .css 脚本上解决它：

.fa-trash {
    color:grey;
}

或者只是

.fa {
    color:grey;
}

另外，如果你根本看不到fa图标，那么你必须把这个放在web.xml中：

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

【讨论】：

更改颜色不会使其可见（除非它是灰色的灰色，但这将是一个更普遍的问题）。而且在我看来，使用内置的 font-awesome 并不是最好的解决方案，因为您可以使用的 fa 版本取决于 PF 提供的版本。使用 webjar 是“更好的”。在此处阅读所有答案：stackoverflow.com/questions/18891768/…
我使用的南街主题主要是绿色，我从没想过颜色会成为问题，直到尝试不同的解决方案近一个小时后，我才能看到图标，改变颜色。

【解决方案4】：

第一个资源文件 css 未在 JSF 中呈现（#{var} 仍然是 #{var）？，

您可以使用
1.使用全局路径
背景图像：url（“../resource/images/loginBackground.jpg”）；
在 css 文件或 evrywhere
2.
在您的 jsf 页面中覆盖 css primefaces 样式。
url("#{resource['images/loginBackground.jpg']}");
3.
图书馆的变化:)

还有其他方法吗？

【讨论】：

【解决方案5】：

如果您不想像上面的答案那样使用内置的 FA 版本，并且仍想在 commandButton 上使用它，请添加

.ui-icon {
    text-indent: 0;
}

【讨论】：