Something went wrong while trying to load the full version of this site. Try hard-refreshing this page to fix the error.

Using Font Awesome for Button Icons

customaware

I know how to use Font Awesome to create a html button on a form.

However, has anyone worked out if it is possible and if so how, to use a Font Awesome icon on an Aware button...

Like in the form below?

Gabbitas

Eagles9999'

There are a few ways but here's a quick and simple way. Take the following steps:

1)Find your startup.html file in c:/AwareIM/tomcat/webapps/AwareIM
Copy the following line of code into the startup.html file immediately after the <META HTTP-EQUIV...........> tag

Save the file

2)In the config tool, Go to the form and then to the drop down menu to select 'Form button options'. Under icons select the button you wish to change.

Under the css class enter the following: fa fa-camera-retro fa-lg fa-spin

Now when you log in to the operation mode you should see an animated spinning camera on your button.

To understand how this works read this: http://fortawesome.github.io/Font-Awesome/examples/

For a list of all icon class names visit here: http://fortawesome.github.io/Font-Awesome/cheatsheet/

Hope this helps

Thanks

Rennur

FontAwesome works great with Aware IM and the improvement to allow for these fonts for use with new release is brilliant.

The Font icons do not work with query operation buttons (possible bug).

The option is available and if the font icon is specified, it will not show up and the icon will remain blank.
The system always looks for image icons for query operations.

Cheers

customaware

Thanx Guys.

Works nicely.

Yes, Rennur.... does not work on Query ops.

fjcortes

Try doing this in the name field on the form of query operations, see the picture.

aware_support

We have noticed that some people use the font incorrectly and specify the name of the CSS class as the icon to use rather than using the font symbol. You MUST specify select the font symbol option to use the font.

For the name of the font use FontAwesome

Refer to the font CSS file for the full list of the font codes and enter the appropriate code of the font symbol.

See how this is done in sample applications for the default Iconic font.

Using Font Awesome for Button Icons

customaware

I know how to use Font Awesome to create a html button on a form.

However, has anyone worked out if it is possible and if so how, to use a Font Awesome icon on an Aware button...

Like in the form below?

Gabbitas

Eagles9999'

There are a few ways but here's a quick and simple way. Take the following steps:

1)Find your startup.html file in c:/AwareIM/tomcat/webapps/AwareIM
Copy the following line of code into the startup.html file immediately after the <META HTTP-EQUIV...........> tag

Save the file

2)In the config tool, Go to the form and then to the drop down menu to select 'Form button options'. Under icons select the button you wish to change.

Under the css class enter the following: fa fa-camera-retro fa-lg fa-spin

Now when you log in to the operation mode you should see an animated spinning camera on your button.

To understand how this works read this: http://fortawesome.github.io/Font-Awesome/examples/

For a list of all icon class names visit here: http://fortawesome.github.io/Font-Awesome/cheatsheet/

Hope this helps

Thanks

Rennur

FontAwesome works great with Aware IM and the improvement to allow for these fonts for use with new release is brilliant.

The Font icons do not work with query operation buttons (possible bug).

The option is available and if the font icon is specified, it will not show up and the icon will remain blank.
The system always looks for image icons for query operations.

Cheers

customaware

Thanx Guys.

Works nicely.

Yes, Rennur.... does not work on Query ops.

fjcortes

Try doing this in the name field on the form of query operations, see the picture.

aware_support

For the name of the font use FontAwesome

Refer to the font CSS file for the full list of the font codes and enter the appropriate code of the font symbol.

See how this is done in sample applications for the default Iconic font.