Icon Size

fa-lg

fa-2x

fa-3x

fa-4x

fa-5x

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

<i class="fa fa-camera-retro fa-lg"></i> fa-lg<i class="fa fa-camera-retro fa-2x"></i> fa-2x<i class="fa fa-camera-retro fa-3x"></i> fa-3x<i class="fa fa-camera-retro fa-4x"></i> fa-4x<i class="fa fa-camera-retro fa-5x"></i> fa-5x
  • If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.

Fixed Width Icons

Use fa-fw to set icons at a fixed width. Great to use when different icon widths throw off alignment. Especially useful in things like nav lists & list groups.

<div class="list-group"><a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a><a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a><a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a><a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; Settings</a></div>

List Icons

  • List icons
  • can be used
  • as bullets
  • in lists

Use fa-ul and fa-li to easily replace default bullets in unordered lists.

<ul class="fa-ul"><li><i class="fa-li fa fa-check-square"></i>List icons</li><li><i class="fa-li fa fa-check-square"></i>can be used</li><li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li><li><i class="fa-li fa fa-square"></i>in lists</li></ul>

Rotated & Flipped

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

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

<i class="fa fa-shield"></i> normal<br><i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br><i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br><i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br><i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br><i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical

Stacked Icons

fa-twitter on fa-square-o

fa-flag on fa-circle

fa-terminal on fa-square

fa-ban on fa-camera

To stack multiple icons, use the fa-stack class on the parent, the fa-stack-1x for the regularly sized icon, and fa-stack-2x for the larger icon. fa-inverse can be used as analternative icon color. You can even throw larger icon classes on the parent to get further control of sizing.

<span class="fa-stack fa-lg"><i class="fa fa-square-o fa-stack-2x"></i><i class="fa fa-twitter fa-stack-1x"></i></span><p>fa-twitter on fa-square-o</p><span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-flag fa-stack-1x fa-inverse"></i></span><p>fa-flag on fa-circle</p><span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-terminal fa-stack-1x fa-inverse"></i></span><p>fa-terminal on fa-square</p><span class="fa-stack fa-lg"><i class="fa fa-camera fa-stack-1x"></i><i class="fa fa-ban fa-stack-2x text-danger"></i></span><p>fa-ban on fa-camera</p>

Disclaimer

All stock images on this template demo are for presentation purposes only, intended to represent a live site and are not included with the template or in any of the Joomla51 club membership plans.

Dribbble images are property of their respective owners. All other images are freely available from Unsplash.

Image Credits