我正尝试在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
真棒字体4.3.0-1

最佳答案

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

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

10-06 08:57
查看更多