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.
