VP Smart uses Font Awesome Iconic Fonts and CSS Toolkit. 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.

See list of icons
List of icons

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 fa fa-flag then to show this icon you will use <i class="fa fa-flag"></i>

You can increase the icon size using additional css classes like fa-lg, fa-2x, fa-3x, fa-4x and fa-5x. See the below examples to learn more.

Selected icon

Example
<i class="fa fa-flag"></i>
Example
<i class="fa fa-flag fa-lg"></i>
Example
<i class="fa fa-flag fa-2x"></i>
Example
<i class="fa fa-flag fa-3x"></i>
Example
<i class="fa fa-flag fa-4x"></i>
Example
<i class="fa fa-flag fa-5x"></i>

To spin a icon indefinitely with CSS3 animation add css class icon-spin

Example
Loading... Loading... Loading... Loading... Loading... Loading...
<i class="fa fa-spinner fa-spin"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

For more examples, please visit - https://fontawesome.com/v4.7.0/examples/


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.