You can place Font Awesome icons just about anywhere with the <i> tag
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));
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()));
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.
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()));
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());