JSF 显示没有按钮的图标答案

【问题标题】：JSF show icon without ButtonJSF 显示没有按钮的图标
【发布时间】：2014-01-10 21:45:29
【问题描述】：

我想显示没有按钮的图标，但它不起作用。我收到以下消息：找不到 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" />

【问题讨论】：

【解决方案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>

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

尝试使用：

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

如果需要，可以使用填充来相应地设置样式。

【讨论】：