The template comes with built-in utility classes which help to you create nice looking lists with icons. All you have to use the following HTML template to add it in any article or in custom HTML module or in VirtueMart Custom Fields.
Example
<div class="feature indent"> <!--Main wrapper to create the display-->
<span class="icon icon-cogs"></span> <!--This is the icon-->
<h3 class="heading">List Heading</h3> <!--Optional heading-->
<h6 class="below-heading">I'm a sub-heading</h6> <!--Optional sub-heading below main heading-->
<p>Main text contents of the list.</p> <!--Text contents-->
<!--Optional hyper link -->
<a href="#" class="text-muted">I am a hyperlink</a>
</div>To add round circle background to the icon and to add a mouse over effect use css class feature-icon-hover in the main wrapper element.
Example
<div class="feature feature-icon-hover indent"> <!--Main wrapper to create the display-->
<span class="icon icon-cogs"></span> <!--This is the icon-->
<h3 class="heading">List Heading</h3> <!--Optional heading-->
<h6 class="below-heading">I'm a sub-heading</h6> <!--Optional sub-heading below main heading-->
<p>Main text contents of the list.</p> <!--Text contents-->
<!--Optional hyper link -->
<a href="#" class="text-muted">I am a hyperlink</a>
</div>To increase the size of the icon add css class indent-size-xl or indent-size-xxl to the main wrapper element.
Example
<div class="feature feature-icon-hover indent indent-size-xl"> <!--Main wrapper to create the display-->
<span class="icon icon-cogs"></span> <!--This is the icon-->
<h3 class="heading">List Heading</h3> <!--Optional heading-->
<h6 class="below-heading">I'm a sub-heading</h6> <!--Optional sub-heading below main heading-->
<p>Main text contents of the list.</p> <!--Text contents-->
<!--Optional hyper link -->
<a href="#" class="text-muted">I am a hyperlink</a>
</div>Example
<div class="feature feature-icon-hover indent indent-size-xxl"> <!--Main wrapper to create the display-->
<span class="icon icon-cogs"></span> <!--This is the icon-->
<h3 class="heading">List Heading</h3> <!--Optional heading-->
<h6 class="below-heading">I'm a sub-heading</h6> <!--Optional sub-heading below main heading-->
<p>Main text contents of the list.</p> <!--Text contents-->
<!--Optional hyper link -->
<a href="#" class="text-muted">I am a hyperlink</a>
</div>Use it multiple times to build a list of features one after another. See this below example where we have a created a simpler list without heading, sub-heading and hyper link. This type of list is used in VirtueMart custom fields which is being displayed in the product pages of the demo site. You can add the HTML codes in text area or text editor type custom fields. Layout position of your custom field can be anything as per your desire.
Example
<div class="feature feature-icon-hover indent">
<span class="icon icon-flag2"></span> <!--This is the icon-->
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> <!--Text contents-->
</div>
<div class="feature feature-icon-hover indent">
<span class="icon icon-cash"></span> <!--This is the icon-->
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> <!--Text contents-->
</div>
<div class="feature feature-icon-hover indent">
<span class="icon icon-credit"></span> <!--This is the icon-->
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> <!--Text contents-->
</div>
<div class="feature feature-icon-hover indent">
<span class="icon icon-phone-wave"></span> <!--This is the icon-->
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> <!--Text contents-->
</div>To place them side by side use Bootstrap 3 grid system. Learn more about Bootstrap 3 grid system http://getbootstrap.com/css/
Example
<div class="row">
<div class="col-sm-6">
<div class="feature feature-icon-hover indent indent-size-xl">
<span class="icon icon-flag2"></span>
<h3 class="heading">Heading</h3>
<h6 class="below-heading">I'm a sub-heading</h6>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<a href="#" class="text-muted">Read more</a>
</div>
</div>
<div class="col-sm-6">
<div class="feature feature-icon-hover indent indent-size-xl">
<span class="icon icon-cash"></span>
<h3 class="heading">Heading</h3>
<h6 class="below-heading">I'm a sub-heading</h6>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<a href="#" class="text-muted">Read more</a>
</div>
</div>
</div>Display in-line icons list
Example
<ul class="list-inline">
<li>
<a href="#" title="Follow us on Twitter"><i class="icon-twitter3 icon-3x"></i><span class="sr-only">Follow us on Twitter</span></a>
</li>
<li>
<a href="#" title="Follow us on Facebook"><i class="icon-facebook3 icon-3x"></i><span class="sr-only">Follow us on Facebook</span></a>
</li>
<li>
<a href="#" title="Follow us on Google+"><i class="icon-googleplus3 icon-3x"></i><span class="sr-only">Follow us on Google Plus</span></a>
</li>
<li>
<a href="#"><i class="icon-flickr2 icon-3x"></i><span class="sr-only">Follow us on Flickr</span></a>
</li>
<li>
<a href="#"><i class="icon-feed2 icon-3x"></i><span class="sr-only">Get feed</span></a>
</li>
</ul>If you are using any WYSIWYG editor you may not be able to enter or save raw HTML codes properly in articles or in custom HTML Module or in VirtueMart Editor type custom field. It is recommended that you set the Default Editor as Editor - CodeMirror in Joomla! Global Configuration before trying to add any HTML codes. CodeMirror Editor makes your life easier when you are dealing with raw HTML codes.
