You can insert icons for form item labels through CSS. Let's consider a form shown in the following screen shot taken from the sample application, ModelHouse. 
Assume that the ModelHouse application is using the Market theme and the corresponding CSS file is: D:\Canvas\apache-tomcat-7.0.67\webapps\ctmodelhouse\css\style\market\jqtbs\market-jqtbs-ltr.css. To insert icons for the form item labels, perform the following: Open the market-jqtbs-ltr.css file and add the following code in it.
| Code Block |
|---|
| [data-item-id="FORM_CREDITCARD"] .CITY-bs label.ct-form__label:before
{
font-family: fontAwesome;
content: '\f1ad';
}
[data-item-id="FORM_CREDITCARD"] .DOB-bs label.ct-form__label:before
{
font-family: fontAwesome;
content: '\f073';
}
[data-item-id="FORM_CREDITCARD"] .INCOME-bs label.ct-form__label:before
{
font-family: fontAwesome;
content: '\f0b1';
}
[data-item-id="FORM_CREDITCARD"] .EMAIL-bs label.ct-form__label:before
{
font-family: fontAwesome;
content: '\f1fa';
}
[data-item-id="FORM_CREDITCARD"] .MOBILE-bs label.ct-form__label:before
{
font-family: fontAwesome;
content: '\f1ac';
}
/* Here, FORM_DEMOCREDITCARD is the form ID.
* CITY, DOB, INCOME, EMAIL, and MOBILE are the respective form item IDs.
*/ |
- Save the changes to market-jqtbs-ltr.css file.
- Refresh the browser and verify that the icons are appearing on the left side of the form item labels as shown in the following screenshot:
|