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.
To see the list of available icons go to Module Manager and open any module or click on New button. Then go to VP Framework - Extended tab. In the tab you will see an option to select "Header Icon". Click on the select button.
This will show you the list of font icons available in the template with preview and respective css class for the use. Click on your desired icon to select one.
Now you will see the preview of the selected icon and its respective css class which you can use any where in your site to show this particular icon.
To show this icon you need to use a i tag or span tag with the icon class. For example of the icon class that you have selected is icon-bag then to show this icon you will use <i class="icon-bag"></i>
You can increase the icon size using additional css classes like icon-lg, icon-2x, icon-3x and icon-4x. See the below examples to learn more.
Example
<i class="icon-bag"></i>Example
<i class="icon-bag icon-lg"></i>Example
<i class="icon-bag icon-2x"></i>Example
<i class="icon-bag icon-3x"></i>Example
<i class="icon-bag icon-4x"></i>
To add a circle background to any icon you need to use css class icon-circle. See the below example.
Example
<i class="icon-bag icon-lg icon-circle"></i>
To spin a icon indefinitely with CSS3 animation add css class icon-spin
Example
<i class="icon-spinner icon-spin"></i>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.
Title
Standard module displayTitle
Standard module display + header iconTitle
Standard module display + badge BadgeTitle
Standard module display + module class suffixmod-box
Title
Standard module display + module class suffixmod-box + icon
Title
Standard module display + module class suffixmod-box + badge
Badge
Title
Standard module display + module class suffixmod-box bg-success
Title
Standard module display + module class suffixmod-box bg-warning
Title
Standard module display + module class suffixmod-box bg-info
Title
Standard module display + module class suffixmod-box bg-danger
Title
Standard module display + module class suffixmod-box align-center
Title
Standard module display + module class suffixmod-box align-right
How to add header icon to a module
To add header icon to any module please follow the below steps.
- Go to Module Manager.
- Open your desired module to which you want to add the icon.
- Go to the tab called VP Framework - Extended.
- Select your desired icon against the field called Header Icon.
- Save them module.
How to add badge to a module
To add badge to any module please follow the below steps.
- Go to Module Manager.
- Open your desired module to which you want to add the icon.
- Go to the tab called VP Framework - Extended.
- Enter your desired text for the badge in the field called Badge Text.
- Select your desired badge color against the field called Badge Style.
- Save them module.
While entering css class suffix in Module Class Suffix field, please ensure to leave a space at the starting.
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.
