TopLogic supports symbol fonts that can be used for button, menu and object symbols. To integrate your own symbol font, you must carry out the following steps. The module ext.com.fontawesome offers the free version of the symbol font "FontAwesome"(https://fontawesome.com/). This module serves as a detailed example of how you can add your own user-defined symbol font to your application.

Making font resources available to the application

Place your font files (*.eot, *.svg, *.ttf, *.woff, *.woff2) in the application's webapp folder. For example, the symbol font "FontAwesome" is included in the distribution at /ext.com.fontawesome/webapp/webfonts/....

Integrate accompanying CSS

Place the CSS file (*.css) for the font in the application's webapp folder. The CSS file for "FontAwesome" can be found as an example at /ext.com.fontawesome/webapp/style/fontawesome/all.min.css.

Note: As the CSS file of the font refers to the font resources, make sure that both files (the CSS and the font files) are saved in a location where the internal references in the CSS are valid. E.g. "FontAwesome" has the following style rule:

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  src: url("../webfonts/fa-solid-900.eot");
}

Therefore, the font resources (e.g. fa-solid-900.eot) must exist in a directory named ../webfonts relative to the style folder of the application (webapp/style). All CSS is included in a single resource at runtime, which is offered to the client via the URL https://your.server/your-app/style/top-logic.css, regardless of where the actual CSS files added to the theme are stored in the application. Therefore, the references in the CSS must be relative to this URL.

Inserting CSS into the standard theme

Add a configuration entry that inserts the CSS file of the font into the default theme core (or your custom theme if you only want to use the font in a single theme).

To do this, create a directory src/main/webapp/WEB-INF/themes/core in your project and create a file theme.xml with the following content:

<theme>
    <styles>
        <style name="/style/fontawesome/all.css"/>
    </styles>
</theme>

Note: The CSS file (here the CSS of the Fontawesome icon font) is referenced with a name in relation to the root folder of the web application resource.

Use of CSS icon references

An icon font cools icons with CSS classes that have been added to an inline HTML element. E.g. "FontAwesome" refers to the "Ambulance" symbol with the CSS classes <i class="fas fa-ambulance"></i> (see https://fontawesome .com/icons/ambulance?style=solid).

In TopLogic, you can refer to symbol font symbols in all configuration properties of the type ThemeImage with the prefix css: with the CSS classes defined by your attached symbol font. For example, you can reference the "ambulance" symbol from "FontAwesome" with the symbol reference "css:fas fa-ambulance".

Examples

Symbol references in the layout

You can define a button with such a symbol font reference (e.g. /com.top_logic.demo/webapp/WEB-INF/layouts/demo/table/tree_grid.xml):

<button id="..."
  class="..."
  image="css:fas fa-globe"
  resourceKey="..."
/>

Icon references in the model

Icon font references can be used to annotate icons for such model elements (e.g. /com.top_logic.demo/webapp/WEB-INF/model/DemoTypes.model.xml):

<interface name="DemoTypes.X">
  <annotations>
    <instance-presentation icon="css:fas fa-handshake demo-blue"/>
  </annotations>
  ...
</interface>

In the example above, you can see that you can add our own custom CSS classes to those defined by your icon font to customize the display of the icon at that specific location. In the example above, the CSS class demo-blue colors the icon blue.