Skip navigation

Font Awesome demo

You can place Font Awesome icons just about anywhere with the <i> tag

Inline Icons

fa-camera-retro

Place Font Awesome icons just about anywhere with the <i> tag.

HTML :
<i wicket:id="inline-fa"></i> fa-camera-retro

Java :
add(new Icon("inline-fa", FontAwesome6IconType.camera_retro_s));

Larger Icons

fa-camera-retro

fa-camera-retro

fa-camera-retro

fa-camera-retro

fa-camera-retro

To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x , fa-3x , fa-4x , or fa-5x classes.

HTML :
<i wicket:id="large-fa"></i> fa-camera-retro
<i wicket:id="2x-fa"></i> fa-camera-retro
<i wicket:id="3x-fa"></i> fa-camera-retro
<i wicket:id="4x-fa"></i> fa-camera-retro
<i wicket:id="5x-fa"></i> fa-camera-retro

JAVA :
add(new Icon("large-fa", FontAwesome6IconTypeBuilder.on(FontAwesome6Solid.camera_retro).size(Size.large).build()));
add(new Icon("2x-fa", FontAwesome6IconTypeBuilder.on(FontAwesome6Solid.camera_retro).size(Size.two).build()));
add(new Icon("3x-fa", FontAwesome6IconTypeBuilder.on(FontAwesome6Solid.camera_retro).size(Size.three).build()));
add(new Icon("4x-fa", FontAwesome6IconTypeBuilder.on(FontAwesome6Solid.camera_retro).size(Size.four).build()));
add(new Icon("5x-fa", FontAwesome6IconTypeBuilder.on(FontAwesome6Solid.camera_retro).size(Size.five).build()));

If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.

Spinning Icons

Use the fa-spin class to get any icon to rotate. Works well with fa-spinner , fa-rotate , and fa-gear .

HTML :
<button class="btn btn-default btn-lg">
    <i wicket:id="spinner-spin-fa"></i>
</button>
<button class="btn btn-default btn-lg">
    <i wicket:id="rotate-spin-fa"></i>
</button>
<button class="btn btn-default btn-lg">
    <i wicket:id="gear-spin-fa"></i>
</button>

JAVA :
add(new Icon("spinner-spin-fa", FontAwesome6IconTypeBuilder.on(FontAwesome6Solid.spinner).spin().build()));
add(new Icon("rotate-spin-fa", FontAwesome6IconTypeBuilder.on(FontAwesome6Solid.rotate).spin().build()));
add(new Icon("gear-spin-fa", FontAwesome6IconTypeBuilder.on(FontAwesome6Solid.gear).spin().build()));

CSS3 animations aren't supported in IE8 - IE9.

Rotated & Flipped

  normal
  fa-rotate-90
  fa-rotate-180
  fa-rotate-270
  fa-flip-horizontal
  fa-flip-vertical

To arbitrarily rotate and flip icons, use the fa-rotate-* and fa-flip-* classes.

HTML :
<i wicket:id="shield-rotate-normal"></i>  normal
<i wicket:id="shield-rotate-90"></i>  fa-rotate-90
<i wicket:id="shield-rotate-180"></i>  fa-rotate-180
<i wicket:id="shield-rotate-270"></i>  fa-rotate-270
<i wicket:id="shield-rotate-flip-horizontal"></i>  fa-flip-horizontal
<i wicket:id="shield-rotate-flip-vertical"></i>  fa-flip-vertical

JAVA :
add(new Icon("shield-rotate-normal", FontAwesome6IconType.shield_halved_s));
add(new Icon("shield-rotate-90", FontAwesome6IconTypeBuilder.on(FontAwesome6Solid.shield_halved)
    .rotate(Rotation.rotate_90).build()));
add(new Icon("shield-rotate-180", FontAwesome6IconTypeBuilder.on(FontAwesome6Solid.shield_halved)
    .rotate(Rotation.rotate_180).build()));
add(new Icon("shield-rotate-270", FontAwesome6IconTypeBuilder.on(FontAwesome6Solid.shield_halved)
    .rotate(Rotation.rotate_270).build()));
add(new Icon("shield-rotate-flip-horizontal", FontAwesome6IconTypeBuilder.on(FontAwesome6Solid.shield_halved)
    .rotate(Rotation.flip_horizontal).build()));
add(new Icon("shield-rotate-flip-vertical", FontAwesome6IconTypeBuilder.on(FontAwesome6Solid.shield_halved)
    .rotate(Rotation.flip_vertical).build()));

Choosing the FontAwesome version

wicket-bootstrap by default depends on FontAwesome-6.x.

If you prefer using FontAwesome-5.x, you can override the default choice by declaring the dependency on FontAwesome-5.x.y in your own project's pom.xml explicitly:

	<dependency>
		<groupId>org.webjars</groupId>
		<artifactId>font-awesome</artifactId>
		<version>5.x.y</version>
	</dependency>

Then simply use the respective classes for version 5 in your java code:

JAVA :
add(new Icon("shield-rotate-normal", FontAwesome5IconType.shield));
add(new Icon("shield-rotate-90", FontAwesome5IconTypeBuilder.on(FontAwesome5Solid.shield)
    .rotate(Rotation.rotate_90).build()));

Some of the wicket-components from wicket-extensions internally use FontAwesome icons, as well. To let those components know about your choice the FontAwesome version, you need to set the CSS resource reference of your choice into the FontAwesomeSettings class, ideally in your application init method.

JAVA :
FontAwesomeSettings.get(Application.get()).setCssResourceReference(FontAwesome5CssReference.instance());