Combining Icon and Text in a Label

You can combine an icon with the caption of a Label element:

As shown above, a Label element is given a Caption attribute value and set to the FA class for the desired icon.

And the result is shown above.

• If you want to add more space between the icon and the text, add a space at the beginning of your Caption attribute (only one - any more than that will be ignored by the browser).

• The style of the caption text is controlled by the FA classes. You can't change it by adding more classes to the Class attribute.

  However, if you want to style the icon and the text separately, you can do this:

In this example, separate Label elements are used for the icon and the accompanying text. The Label element for the icon is also placed in a separate Division, which allows the icon to be further styled, in this case by setting its Color using CSS in a separate style sheet.

By applying style to the Division element ("divStyleFA") that contains the icon, the icon color has been set to Blue. The second Label element's Class attribute has been set to change the font size of the text.