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", FontAwesomeIconType.camera_retro));
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", FontAwesomeIconTypeBuilder.on(FontAwesomeGraphic.camera_retro).size(Size.large).build()));
add(new Icon("2x-fa", FontAwesomeIconTypeBuilder.on(FontAwesomeGraphic.camera_retro).size(Size.two).build()));
add(new Icon("3x-fa", FontAwesomeIconTypeBuilder.on(FontAwesomeGraphic.camera_retro).size(Size.three).build()));
add(new Icon("4x-fa", FontAwesomeIconTypeBuilder.on(FontAwesomeGraphic.camera_retro).size(Size.four).build()));
add(new Icon("5x-fa", FontAwesomeIconTypeBuilder.on(FontAwesomeGraphic.camera_retro).size(Size.five).build()));
Use the
fa-spin
class to get any icon to rotate. Works well with
fa-spinner
,
fa-refresh
, and
fa-cog
.
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="refresh-spin-fa"></i>
</button>
<button class="btn btn-default btn-lg">
<i wicket:id="cog-spin-fa"></i>
</button>
JAVA :
add(new Icon("spinner-spin-fa", FontAwesomeIconTypeBuilder.on(FontAwsomeGraphic.spinner).spin().build()));
add(new Icon("refresh-spin-fa", FontAwesomeIconTypeBuilder.on(FontAwsomeGraphic.refresh).spin().build()));
add(new Icon("cog-spin-fa", FontAwesomeIconTypeBuilder.on(FontAwsomeGraphic.cog).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", FontAwesomeIconType.shield));
add(new Icon("shield-rotate-90", FontAwesomeIconTypeBuilder.on(FontAwsomeGraphic.shield)
.rotate(Rotation.rotate_90).build()));
add(new Icon("shield-rotate-180", FontAwesomeIconTypeBuilder.on(FontAwsomeGraphic.shield)
.rotate(Rotation.rotate_180).build()));
add(new Icon("shield-rotate-270", FontAwesomeIconTypeBuilder.on(FontAwsomeGraphic.shield)
.rotate(Rotation.rotate_270).build()));
add(new Icon("shield-rotate-flip-horizontal", FontAwesomeIconTypeBuilder.on(FontAwsomeGraphic.shield)
.rotate(Rotation.flip_horizontal).build()));
add(new Icon("shield-rotate-flip-vertical", FontAwesomeIconTypeBuilder.on(FontAwsomeGraphic.shield)
.rotate(Rotation.flip_vertical).build()));