JSF显示没有Button的图标

Question

大家好我想要显示没有按钮的图标，但它不起作用。我收到以下消息：没有找到Mime-Type。 这两个图标是Primefaces的默认图标。

我使用JSF 2.1和primefaces 3.5

<h:graphicImage rendered="#{!task.IS_SEEN}" name="ui-icon-mail-closed"/>
<h:graphicImage rendered="#{task.IS_SEEN}" name="ui-icon-mail-closed"/>

如果我使用按钮它可以工作，或者我可以设置按钮无法按下

<p:commandButton rendered="#{!task.IS_SEEN}" icon="ui-icon-mail-closed" />
<p:commandButton rendered="#{task.IS_SEEN}" icon="ui-icon-mail-open" />

Answer 1

如果你只想要一个可以在支持bean中触发动作的可点击图像，我建议在h:commandLink中包装图形图像。

<h:commandLink rendered="#{!task.IS_SEEN}" value="" action="#{YourBean.myAction}">
    <h:graphicImage  value="your-image-here"/>
</h:commandLink>

如果你想要易于使用，漂亮的矢量图标，我建议你检查Font Awesome http://fontawesome.io/icons/。

要使用Font Awesome，请在<h:head>中添加以下一行：

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"></link>

然后您可以通过这种简单的方式轻松地将图标放在commandLinks中：

<h:commandLink rendered="#{!task.IS_SEEN}" value="" action="#{YourBean.myAction}">
    <i class="fa fa-envelope"></i>
</h:commandLink>

Answer 2

您还需要像这样指定css类 ui-icon ：

<h:panelGroup styleClass="ui-icon ui-icon-mail-closed" />

Answer 3

实际上那些指向精灵文件的CSS类，所以从技术上讲它们不是图标。

尝试使用：

<h:panelGroup styleClass="ui-icon-mail-closed" rendered="#{!task.IS_SEEN}" />

并且如果需要使用填充来相应地设置样式。