BootsFaces supports both Font Awesome 4 and Font Awesome 5.
If you're interested in Font Awesome 4, follow this link. The page you're currently reading focuses on Font Awesome 5.
BootsFaces allows you to use both version of Font Awesome on the same page. However, we don't recommend this because the icon sets don't blend in seamlessly, as you can see by opening the menu of this page.
BootsFaces supports the Font Awesome icon set with its 3000+ icons.
To activate Font Awesome 5, select one of the flavors of the icon set:
As you will see later, we also support most Awesome features, which will work with Glyphicon too!
Changed in 1.2.1
You can also use both name and value to specify the icon, but we've deprecated name in BootsFaces 1.2.1 in favor of value.
Glyphicons With version 4, Bootstrap dropped support of the Glyphicons. So BootsFaces 2 won't support the Glyphicons, either.
To increase icon sizes relative to their container, use the size="xs" (75% of the original size),
size="sm" (87,5%),
size="lg" (33% increase), size="2x",
size="3x", and so on, up to size="10x" attributes.
You can also rotate and flip your icons.
To rotate or flip your icons, just use the rotate="R", rotate="L" and flip="H", flip="V" attributes respectively.
To let your icons spin, just add the attribute spin="true". Alternatively, you can use the attribute pulse
to have your icon rotate in eight discrete steps.
disabled and readOnlyBoth icon and iconAwesome can be used with AJAX and/or JavaScript.
The attributes readonly and disabled prevent AJAX from being executed. Note that JavaScript is not affected - it's executed without checking the state of the widget.
The difference between readonly and disabled is that disabled grays out the icon.
This is one of the cases a picture is worth a thousand words. Move the mouse over the spinning icons below, click them, and change the checkboxes below to get the idea.
By default, BootsFaces fetches Font Awesome 5.2.0 from a CDN (from https://use.fontawesome.com/releases/v5.2.0/css/all.css, to be precise).
If you want to suppress the automatic web access for some reason, you've got several options. You can deactivate it globally in the web.xml, you can
add a facet to the header of the JSF-view (which allows you to activate and deactivate the feature on a per-page basis) or you can simply include your own
CSS import. If the file name contains the word font-awesome and ends with .css, BootsFaces won't try to load Font Awesome a second time.
In most cases that's precisely what you need to do, so you don't have to configure anything to deactivate the defaults.
You can use all the attributes controlling the responsive behavior of <b:column />
also with <b:icon />. The example may look a bit odd, because these icons
don't fill all the available screen space, but still, it shows the idea nicely:
You can play also with col-*-*, visible and hidden attribute, as any bootstrap elements. For example:
<b:iconAwesome name="cog" /> supports tooltips:
| Attribute | Default value | Description |
|---|---|---|
| addon | false | Boolean value: if true the element is used as Addon. |
| ajax | false | Whether the Button submits the form with AJAX. |
| auto-update autoUpdate (alternative writing) |
false | Setting this flag updates the widget on every AJAX request. |
| binding | (none) | An EL expression referring to a server side UIComponent instance in a backing bean. |
| brand | false | Use the free brand font of FontAwesome 5. As a side effect, every FontAwesome icon on the same page is switched to FontAwesome 5.2.0. By default, the icon set is the older version 4.7.0. |
| col-lg colLg (alternative writing) |
-1 | Integer value to specify how many columns to span on large screens (≥1200 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| col-md colMd (alternative writing) |
-1 | Integer value to specify how many columns to span on medium screens (≥992 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| col-sm colSm (alternative writing) |
-1 | Integer value to specify how many columns to span on small screens (≥768p pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| col-xs colXs (alternative writing) |
-1 | Integer value to specify how many columns to span on tiny screens (≤ 767 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| delay | (none) | Delays the AJAX request. |
| disabled | false | Boolean value to specify if the button is disabled. |
| display | block | If you use the "visible" attribute, the value of this attribute is added. Legal values: block, inline, inline-block. Default: block. |
| fixed-width fixedWidth (alternative writing) |
false | Activates the fixed with feature of FontAwesome 5. As a side effect, every FontAwesome icon on the same page is switched to FontAwesome 5.2.0. By default, the icon set is the older version 4.7.0. |
| flip | (none) | Flip the icon: can be H (horizontal) or V (vertical). |
| hidden | (none) | This column is hidden on a certain screen size and below. Legal values: lg, md, sm, xs. |
| id | (none) | Unique identifier of the component in a namingContainer. |
| inverse | false | Switch the icon from black-on-white to white-on-black. |
| large-screen largeScreen (alternative writing) |
-1 | Alternative spelling to col-lg. Integer value to specify how many columns to span on large screens (≥1200 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| light | false | Use the paid 'light' font of FontAwesome 5. As a side effect, every FontAwesome icon on the same page is switched to FontAwesome 5.2.0. By default, the icon set is the older version 4.7.0. |
| medium-screen mediumScreen (alternative writing) |
-1 | Alternative spelling to col-md. Integer value to specify how many columns to span on medium screens (≥992 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| name | (none) | Icon name. This is the name of the Font Awesome icon without the leading 'fa-' prefix. This attribute has been deprecated in favor of 'value'. |
| offset | (none) | Integer value to specify how many columns to offset. |
| offset-lg offsetLg (alternative writing) |
(none) | Integer value to specify how many columns to offset. |
| offset-md offsetMd (alternative writing) |
(none) | Integer value to specify how many columns to offset. |
| offset-sm offsetSm (alternative writing) |
(none) | Integer value to specify how many columns to offset. |
| offset-xs offsetXs (alternative writing) |
(none) | Integer value to specify how many columns to offset. |
| onclick | (none) | The onclick attribute. |
| oncomplete | (none) | JavaScript to be executed when ajax completes. |
| ondblclick | (none) | Client side callback to execute when input element is double clicked. |
| onerror | (none) | JavaScript to be executed when ajax results on an error (including both network errors and Java exceptions). |
| onmousedown | (none) | Client side callback to execute when a pointer input element is pressed down over input element. |
| onmousemove | (none) | Client side callback to execute when a pointer input element is moved within input element. |
| onmouseout | (none) | Client side callback to execute when a pointer input element is moved away from input element. |
| onmouseover | (none) | Client side callback to execute when a pointer input element is moved onto input element. |
| onmouseup | (none) | Client side callback to execute when a pointer input element is released over input element. |
| onsuccess | (none) | JavaScript to be executed when ajax completes with success (i.e. there's neither a network error nor a Java exception). |
| process | (none) | Comma or space separated list of ids or search expressions denoting which values are to be sent to the server. |
| pulse | false | Boolean value: if true the icon will rotate with 8 discrete steps. |
| readonly | false | Flag indicating that this input element will prevent changes by the user. |
| regular | false | Use the paid 'regular' font of FontAwesome 5. As a side effect, every FontAwesome icon on the same page is switched to FontAwesome 5.2.0. By default, the icon set is the older version 4.7.0. |
| rendered | false | Boolean value to specify the rendering of the component, when set to false the component will not be rendered. |
| rotate | (none) | Rotate 90 degrees the icon: Can be L,R. |
| size | (none) | Icon Size: legal values are lg (=133%), 2x, 3x, 4x, 5x. If you're using Fontawesome 5, also 6x, 7x, 8x, 9, 10x, xs (=75%), and sm (=87.5%) are allowed. |
| small-screen smallScreen (alternative writing) |
-1 | Alternative spelling to col-sm. Integer value to specify how many columns to span on small screens (≥768p pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| solid | false | Use the free font of FontAwesome 5. As a side effect, every FontAwesome icon on the same page is switched to FontAwesome 5.2.0. By default, the icon set is the older version 4.7.0. |
| span | (none) | Integer value to specify how many columns to span on medium screens (≥992 pixels). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| spin | false | Boolean value: if true the icon will spin. |
| style | (none) | Inline style of the input element. |
| style-class styleClass (alternative writing) |
(none) | Style class of this element. |
| tiny-screen tinyScreen (alternative writing) |
-1 | Alternative spelling to col-xs. Integer value to specify how many columns to span on tiny screens (≤ 767 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| tooltip | (none) | The text of the tooltip. |
| tooltip-container tooltipContainer (alternative writing) |
body | Where is the tooltip div generated? That's primarily a technical value that can be used to fix rendering errors in special cases. Also see data-container in the documentation of Bootstrap. The default value is body. |
| tooltip-delay tooltipDelay (alternative writing) |
0 | The tooltip is shown and hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay). |
| tooltip-delay-hide tooltipDelayHide (alternative writing) |
0 | The tooltip is hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay). |
| tooltip-delay-show tooltipDelayShow (alternative writing) |
0 | The tooltip is shown with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay). |
| tooltip-position tooltipPosition (alternative writing) |
(none) | Where is the tooltip to be displayed? Possible values: "top", "bottom", "right", "left", "auto", "auto top", "auto bottom", "auto right" and "auto left". Default to "bottom". |
| update | (none) | Component(s) to be updated with ajax. |
| value | (none) | Icon name. This is the name of the Font Awesome icon without the leading 'fa-' prefix. Synonym of the attribute 'name'. |
| visible | (none) | This column is shown on a certain screen size and above. Legal values: lg, md, sm, xs. |
You can browse the list of Font Awesome icons on the Font Awesome project page.