remedy

Font Awesome in Remedy


I would like to improve the look and feel of my Remedy app by inserting Font Awesome icons where buttons appear styled. How do I implement Font Awesome icons in my Remedy app?


Solution

  • Create a button through the Remedy AR System WYSIWYG. In the Display properties, specify the necessary Font Awesome classes. For example, fa fa-search. In the image fields upload an Embedded Image that is completely transparent. Set the "Display as Flat Image" property to true. You can specify the Alternative Text to something useful to appear when users hover the icon, for this example, "Search".

    In the Appearance properties for the view, edit the web header to upload Font Awesome CSS. For this example, the path to this Font Awesome is at "\Program Files\BMC Software\ARSystem\midtier\resources\standard\stylesheets\font-awesome".

    <link href="../../../../resources/stylesheets/font-awesome/css/font-awesome.min.css" rel='stylesheet' type='text/css'>
    

    You may want to upload another css file to specifically style this class to the font-size and color of your choosing. Add the path for this css file in the Web Header as we have done for Font Awesome and edit the Custom CSS Style as needed.

    Note, if the Image Position property is set to center, then only the icon and no text should appear. If the Image Property is set to right and the button has a label such as "Search", then it will appear as the text with a font awesome icon to the right. This pair looks pretty good when the font is styled as Header III.