How to use icon fonts to display an icon for a button
There are many places in the Configuration Tool that you may need to use icons - when defining “panel” operations or “operations on records”, when defining menu commands, tabs and so on. Every time you add an icon you need to specify its properties on the “Icon Settings” dialog. There are two methods of specifying an icon - you can just specify where in the file system the file representing the icon is - the file must be of the image type (png, jpg, gif and so on). The icon stored in the file should be 16 pixels wide and 16 pixels high. If you use this method, you should select the “Icon is represented by a file” radio button and select the icon file in the file system.
More often, though, you will use the second method where you define a CSS class (or classes) that represents the icon. The CSS class you specify in most cases uses a special web font where symbols of the font are represented by icons in a vector format. Because of this, icons are easily scalable, it is easy to change their size or color. AwareIM includes support for two well-known web fonts - “Font Awesome” and “LineIcons”. If you want to use these fonts you don't need to do anything else, but if you want to integrate a different font, then you have to modify some of the AwareIM files to achieve this.
If you want to use Font Awesome or LineIcons you should select the “Icon is represented by a CSS class” radio button. If you know the name of the classes, you can just enter them into the text box next to the radio button. Alternatively, you can select the font and click on the “Pick Symbol” link. AwareIM will display all symbols available in the font, and you can click on the symbol you want. The corresponding classes will be added to the text box. You will see the preview of the symbol. You can change the color and size of the icon and if you are using Font Awesome then you will also be able to specify some icon animation effects and rotate the icon.
By default, AwareIM comes with the free versions of both Font Awesome and LineIcons. If you want to use the Professional version of both fonts you need to purchase them and install somewhere on the same machine where AwareIM. Then you need to install them into AwareIM. To do this go to the AwareIM Control Panel and select the “Settings/General” menu item. The “General Settings” dialog will be displayed. Click on the “Install Font Awesome Pro” button or “Install LineIcons Pro” button and then specify the location of the font(s) on your machine. When the installation finishes the Professional fonts will appear in the list of fonts of the “Icon Settings” dialog.
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