PrimeFaces 图标未在命令按钮上呈现

Question

我想在 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 class 时：

<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

Answer 1

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

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

Answer 2

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

您可以使用
1.使用全局路径
背景图像：url("../resource/images/loginBackground.jpg");
在 css 文件或任何地方
2.
在您的 jsf 页面中覆盖 css primefaces 样式。
url("#{资源['images/loginBackground.jpg']}");
3.
库中的更改:)

哪里还有其他方法？

Answer 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>

Answer 4

只需添加 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

Answer 5

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

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

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

因此将加载 primefaces 图标。

PrimeFaces 图标未在命令按钮上呈现

PrimeFaces icons not render on the commandButton

css

jsf

primefaces

jsf-2

font-awesome