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 fa fa-heart-o"></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 fa fa-heart-o"></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 fa fa-heart-o"></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 fa fa-heart-o"></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 fa fa-flag"></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 fa fa-money"></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 fa fa-credit-card"></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 fa fa-phone"></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 fa fa-flag"></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 fa fa-money"></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="fa fa-twitter fa-2x"></i><span class="sr-only">Follow us on Twitter</span></a>
</li>
<li>
<a href="#" title="Follow us on Facebook"><i class="fa fa-facebook fa-2x"></i><span class="sr-only">Follow us on Facebook</span></a>
</li>
<li>
<a href="#" title="Follow us on Google+"><i class="fa fa-google-plus fa-2x"></i><span class="sr-only">Follow us on Google Plus</span></a>
</li>
<li>
<a href="#" title="Follow us on Pinterest"><i class="fa fa-pinterest fa-2x"></i><span class="sr-only">Follow us on Pinterest</span></a>
</li>
<li>
<a href="#" title="Follow us on Flickr"><i class="fa fa-flickr fa-2x"></i><span class="sr-only">Follow us on Flickr</span></a>
</li>
</ul>Example
- Visa
- Mastercard
- Diners Club
- Amex
- PayPal
<ul class="list-inline">
<li>
<i class="fa fa-cc-visa fa-2x"></i><span class="sr-only">Visa</span>
</li>
<li>
<i class="fa fa-cc-mastercard fa-2x"></i><span class="sr-only">Mastercard</span>
</li>
<li>
<i class="fa fa-cc-diners-club fa-2x"></i><span class="sr-only">Diners Club</span>
</li>
<li>
<i class="fa fa-cc-amex fa-2x"></i><span class="sr-only">Amex</span>
</li>
<li>
<i class="fa fa-paypal fa-2x"></i><span class="sr-only">PayPal</span>
</li>
</ul>Display in-line set of services
Example
-
Free Shipping & Return All orders above $50 ships free -
Money Back Guaranteed 30 days money back policy -
24/7 Support Feel free to call us anytime.
<ul class="list-service">
<li>
<span class="service-image">
<img src="/smart/images/icons/speed-icon.png" alt="Free Shipping Icon"><!--You can place your custom icon image here-->
</span>
<span class="service-heading">Free Shipping & Return</span>
<span class="service-text text-muted">All orders above $50 ships free</span>
</li>
<li>
<span class="service-image">
<img src="/smart/images/icons/money-icon.png" alt="Money Back Icon"><!--You can place your custom icon image here-->
</span>
<span class="service-heading">Money Back Guaranteed</span>
<span class="service-text text-muted">30 days money back policy</span>
</li>
<li>
<span class="service-image">
<img src="/smart/images/icons/support-icon.png" alt="Customer Support Icon"><!--You can place your custom icon image here-->
</span>
<span class="service-heading">24/7 Support</span>
<span class="service-text text-muted">Feel free to call us anytime.</span>
</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.
