我正尝试在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;
}