Skip navigation

Font Awesome demo

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()));

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

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()));