Recommended Free Tools
You can show a Font Awesome glyph in a standard JSF h:commandButton by placing the glyph’s character reference in its value and applying Font Awesome classes with styleClass. This produces an icon-valued button, not a button containing separate icon and text markup. The exact classes and stylesheet must match the Font Awesome version in your application.
Use a character reference for an icon-valued command button
The standard h:commandButton renders a button from its value. Its styleClass attribute supplies CSS classes to the generated HTML element. That makes a character reference plus Font Awesome CSS a suitable approach when the icon itself can serve as the button’s visible content.
This example follows the Font Awesome 4.7 pattern shown by OmniJava in its article published May 26, 2018. It assumes that the matching WebJar resource is available in the application:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<h:outputStylesheet library="webjars"
name="font-awesome/4.7.0/css/font-awesome.min-jsf.css" />
</h:head>
<h:body>
<h:form>
<h:commandButton value=""
styleClass="fa fa-arrow-up fa-3x"
action="#{someBean.someAction}" />
</h:form>
</h:body>
</html>In this version-specific example,  represents the up-arrow glyph, while fa and fa-arrow-up identify the Font Awesome 4 icon and fa-3x applies a size class. Keep the command button’s normal JSF action binding for submission; the icon classes change its appearance, not its command behavior.
#1 Best Overall
- New
- Mint Condition
- Dispatch same day for order received before 12 noon
- Guaranteed packaging
- No quibbles returns
The stylesheet path is specific to the example’s WebJar dependency and Font Awesome 4.7.0. Use the resource path, character reference, and class syntax appropriate to the version and packaging actually installed in your application rather than copying this path into an unrelated setup. The historical example is documented at OmniJava.
What standard h:commandButton can and cannot render
In the JSF 2.2 Facelets reference, value is the component’s current value, and styleClass is passed through as the rendered element’s class. The reference also documents image as a separate option: when supplied, the component renders an image-type input; otherwise it renders a button-type input using its value. See the Oracle h:commandButton reference.
This value-based rendering is not a general mechanism for placing nested HTML such as <i> or <span> inside a standard command button. Current Font Awesome guidance instead shows applying its family/style and icon-name classes to an inline <i> element, with <span> also permitted. That HTML pattern is useful where a component or template supports child markup, but it should not be assumed to work as children of standard h:commandButton. Font Awesome’s current instructions are in How To Add Icons.
Choose the approach that fits the button
| Need | Approach | Important distinction |
|---|---|---|
| Standard JSF button whose visible content is an icon glyph | Character reference in value, with Font Awesome classes in styleClass |
Match the glyph, stylesheet and class names to the installed Font Awesome version. |
| An icon alongside ordinary text as separate HTML | Use a JSF component or template that supports child markup, or a library’s button feature | Inline <i>/<span> syntax is not, by itself, evidence that standard h:commandButton accepts nested content. |
| A component-library-specific icon button | Use that library’s documented icon API | For example, BootsFaces documents iconAwesome on its own command button. It is not an attribute of standard JSF h:commandButton. Its showcase describes the default icon set as Font Awesome 4.7.0 unless documented Font Awesome 5 options are enabled. |
BootsFaces’ library-specific API and version notes are shown in its commandButton showcase. Do not combine Font Awesome 4 and newer class conventions without confirming which version and options your application uses.
Rank #3
Give an icon-only button an accessible name
An icon may communicate its purpose visually without supplying a meaningful name to a screen reader. Do not leave an icon-only control unnamed. The JSF 2.2 tag reference documents label and title attributes; use a naming method supported by your JSF implementation and verify the resulting accessible name in the rendered page. The label should describe the action, such as “Move up,” rather than merely naming the pictured arrow.
Quick Recap
Rank #4
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
