Icons

Default Icons

BootsFaces supports the default Icon set of Bootstrap Glyphicons


glyphicon-cloud
glyphicon-envelope
glyphicon-pencil
glyphicon-glass

Using an icon in BootsFaces is very simple: just add a <b:icon> with a name attribute with the icon name (without the trailing glyphicon- prefix)


Changed in version 0.8.1 If you are using OmniFaces, read the configuration for the Icons to apply to your Project on the Omnifaces Integration page.

Font Awesome Icon set

Since BootsFaces is born to help you design a wonderful website, we recognize that Icons are an important tool to achieve this goal and there are never enough:

for this reason, BootsFaces now supports the Font Awesome Icon set with its 600+ icons.

As you will see later, we also support most Awesome features, which will work with Glyphicon too!


fa-camera-retro
fa-coffee
fa-futbol-o
fa-heartbeat
fa-group
fa-gamepad
Adding a Font Awesome icon in BootsFaces is easy: use the <b:iconAwesome> tag with the icon name (without the trailing fa- prefix)

Icon Size

BootsFaces supports different sizes for the Icons.


size="lg"
size="2x"
size="3x"
size="4x"
size="5x"

To increase icon sizes relative to their container, use the size="lg" (33% increase), size="2x", size="3x", size="4x", or size="5x" attributes.

Rotated and Flipped Icons

You can also rotate and flip your icons.


normal
rotate="R" (right - 90 deg.)
rotate="L" (left - 270 deg.)
flip="H" (horizontal)
flip="V" (vertical)

To rotate or flip your icons, just use the rotate="R", rotate="L" and flip="H", flip="V" attributes respectively.

Animated Icons


To let your icons spin, just add the spin="true" attribute.

AJAX, JavaScript, disabled and readOnly

Both 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.

Glyphicon: Font Awesome icon:
Last action:
  • No message yet.
  • Play with the AJAXified widget to add messages.

Configuring FontAwesome

By default, BootsFaces fetches FontAwesome 4.3.0 from a CDN (from http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css, to be precise).

If you want to supress the automatical internet 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 FontAwesome a second time. In most cases that's precisely what you need to do anyways, so you don't have to configure anything to deactivate the defaults.


Responsive design since 0.9.0

You can use all the attributes controlling the responsive behaviour 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:

Visibility depending on screen size since 0.8.6/0.9.0

You can play also with col-*-*, visible and hidden attribute, as any bootstrap elements. For example:


Visible on >= md:
Visible on <= sm:
Visible on sm...lg:
Visible on xs and md:
Col-md-6, offset 2:

Tooltips

<b:iconAwesome name="cog" /> supports tooltips:


Reference section

Attribute Default value Description
addon false Boolean value: if true the element is used as Addon.
ajax false Activates AJAX. The default value is false (no AJAX).
binding (none) An EL expression referring to a server side UIComponent instance in a backing bean.
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.
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.
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.
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.
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, mandatory.
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 with success.
ondblclick (none) Client side callback to execute when input element is double clicked.
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.
process (none) Comma or space separated list of ids or search expressions denoting which values are to be sent to the server.
readonly false Flag indicating that this input element will prevent changes by the user.
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, 2x, 3x, 4x, 5x.
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.
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.
visible (none) This column is shown on a certain screen size and above. Legal values: lg, md, sm, xs.
Attribute Default value Description
addon false Boolean value: if true the element is used as Addon.
ajax false Activates AJAX. The default value is false (no AJAX).
binding (none) An EL expression referring to a server side UIComponent instance in a backing bean.
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.
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.
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.
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.
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, mandatory.
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 with success.
ondblclick (none) Client side callback to execute when input element is double clicked.
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.
readonly false Flag indicating that this input element will prevent changes by the user.
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, 2x, 3x, 4x, 5x.
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.
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.
visible (none) This column is shown on a certain screen size and above. Legal values: lg, md, sm, xs.