How to use icon fonts to display an icon for a button

When you define icons for your buttons (in operations, menu commands, forms etc) Aware IM offers you a choice to provide the file of the icon or refer to the CSS class definition of the icon. In this section we will explain how to do the latter.

When you refer to a CSS class for the icon definition you normally refer to the icon defined in a special “icon font” that contains a large collection of such icons. The advantage of such fonts is that you can display the icon in different colors and sizes. To refer to a particular icon you need to know the name of the CSS class that corresponds to the icon. The makers of the icon font usually provide a sheet with all icons it has and the corresponding CSS classes.

By default Aware IM uses icons from two popular fonts - “Font Awesome” and “Line Icons”. So anywhere in Aware IM you can refer to the icons of these fonts, For example, to refer to the “edit” icon you can specify fa fa-edit as the name of the CSS class. There are two buttons next to the control that allows you to specify the CSS class of the font. The first one is FA and it brings up all the icons available in the free version of Fon Awesome. You can click on the icon to make a selection. The LI button displays the available icons of the free Line Icons font.

You can purchase a paid version of these fonts and use those versions. To do this for Font Awesome all you have to do is populate the AwareIM/Tomcat/webapps/AwareIM/fontawesome-pro-5.6.3-web folder.

What if you want to use icons from some other font? In this case you need to provide the definition of this font in your own CSS file (see How to use CSS). Or you can just add the CSS file provided by the font maker to the AwareIM/Tomcat/webapps/AwareIM/Custom/CSS folder

Icon colors can be specified directly in the dialog. If you want to define icons in different sizes you need to provide your own CSS class definition of these sizes in your custom CSS file and mention them when you refer to the icon. For example,

.crm-large-font {
      font-size: 26px;
      }

And then refer to these styles and the icon itself like so:

crm-large-font fa fa-edit