%META:TOPICINFO{author="ProjectContributor" comment="" date="1716289503" format="1.1"  version="1"}%
%META:TOPICPARENT{name="Macros"}%
---+ JQICON -- render an image 
Renders an icon made availabe by the IconService. 

---++ Parameters
%TABLE{sort="off"}%
| *Parameter* | *Description* | *Default* |
| ="name"= | name of the icon to display | |
| =class= | additional css class for the img tag | | 
| =animate= | can be one of bounce, burst, flash, float, horizontal, passing, pulse, ring, shake, spin, tada, vertical, wrench |
| =alt= | alt attribute | |
| =title= | title attribute | |
| =style= | css style format to be added to the image element | |
| =format= | format string used to render the icon; known variables to be used in the format string are: \
           <ul>\
            <li> =$iconName=: name as given to the =name= parameter</li> \
            <li> =$iconPath=: url path</li> \
            <li> =$iconClass=: css class as specified by the =class= parameter </li>\
            <li> =$iconStyle=: css styles as specified by the =style= parameter </li>\
            <li> =$iconAlt=: alt attribute-value; if the =alt= parameter to JQICON is set, this expands to =alt='...'= </li> \
            <li> =$iconTitle=: title attribute-value; if the =title= parameter to JQICON is set, this expands to =title='...'= </li> \
           </ul> | for image icons: =&lt;img src='$iconPath' class='$iconClass $iconName' $iconStyle $iconAlt$iconTitle/>=; for font icons: =&lt;i class='$iconClass' $iconStyle $iconTitle>&lt;/i>= |

Example for famfamfam icons:

<verbatim class="tml">
%JQICON{"tick" alt="alternative content" title="this is a tick icon"}%
%JQICON{"cross"}%
%JQICON{"disk"}%
%JQICON{"star"}%
%JQICON{"lightbulb"}%
%JQICON{"camera"}%
%JQICON{"date"}%
%JQICON{"heart" animate="bounce"}%
</verbatim> 

Produces:

%JQICON{"tick" alt="alternative content" title="this is a tick icon"}% 
%JQICON{"cross"}% 
%JQICON{"disk"}%
%JQICON{"star"}%
%JQICON{"lightbulb"}%
%JQICON{"camera"}%
%JQICON{"date"}% 
%JQICON{"heart" animate="bounce"}%

Example for font-awesome icons:

<verbatim class="tml">
%JQICON{"fa-pagelines" style="font-size:1em;color:#00BF00"}%
%JQICON{"fa-pagelines" style="font-size:2em;color:#0FAF0F"}%
%JQICON{"fa-pagelines" style="font-size:3em;color:#1F9C1F"}%
%JQICON{"fa-pagelines" style="font-size:4em;color:#2D812D"}%
%JQICON{"fa-pagelines" style="font-size:5em;color:#315C31"}%
</verbatim> 

Produces:

%JQICON{"fa-pagelines" style="font-size:1em;color:#00BF00"}% 
%JQICON{"fa-pagelines" style="font-size:2em;color:#0FAF0F"}% 
%JQICON{"fa-pagelines" style="font-size:3em;color:#1F9C1F"}% 
%JQICON{"fa-pagelines" style="font-size:4em;color:#2D812D"}% 
%JQICON{"fa-pagelines" style="font-size:5em;color:#315C31"}%
%STOPINCLUDE%

---++ Related
[[VarJQICONPATH][JQICONPATH]], [[VarICON][ICON]], JQueryPlugin, [[JQueryFontAwesome]], FamFamFamSilkIcons, IconService
