Virtuoso - Professional Bootstrap Template

A BOOTSTRAP TEMPLATE

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

Home Library Applications Settings

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

Disclaimer

All stock images on this template demo are for presentation purposes only, intended to represent a live site and are not included with this template.

Most of the images used here are available from shutterstock.com. Links are provided if you wish to purchase them from their copyright owners.

Contact Details

Quay View,
Mullaghmore,
Co. Sligo,
Ireland