Icon Fonts in the DataFlex WebApp Framework

Today, applications can be viewed on any number of devices using any number of browsers. This is forcing technologies to be more fluid, and to be able to accommodate nearly any screen size. The need for icon images to be flexible is one of the reasons icon fonts are quickly becoming the industry standard for adding them to new applications.

In this fourth blog about Styling DataFlex Web Applications I’ll provide some basic information on icon fonts, why to use them, and how you can apply them to applications built with the DataFlex WebApp Framework.

Introducing Icon Fonts

Traditional bitmap icons do not scale well, and can slow down your applications. Fonts, however, scale extremely well because they are scalable vector graphics that easily adjust to the allowed space. Icon Fonts are vector graphics that are applied in the same manner a standard character font is. While scalability (vector) is the main goal of the technology, it can also improve performance by reducing the number of HTTP requests. A downside of using icon fonts is that they only allow a single color per image (or two if you count the background color).

The technology is based on the ability of the browser to load custom fonts that are referenced inside a style sheet. This font contains the icons instead of the regular characters. By setting this font on an element and adding the character inside the element, an icon will be shown.

There are several resources that allow the generation of these fonts usually also providing sets of icons to choose from. Two examples are www.fontastic.me and www.icomoon.io.

Using Icon Fonts 

To use icon fonts: 

1. Obtain the icon font to use in your application
2. Include the font within your CSS
3. Use the icon font in your application
4. Customize the DataFlex WebApp Framework to use the font

Obtaining Icon Fonts

Visit one of the websites that allow the download or generation of these fonts.

The sites www.fontastic.me and www.icomoon.io, for example, have sets of free icon fonts that can be downloaded. These websites generate a zip file that contain the fonts and example CSS and HTML that show how to use the font.

To try use those fonts, extract the files from the downloaded ZIP to a subfolder (e.g. Fonts) of the CssStyle folder in your workspace structure and modify application.css using the information provided in the next steps.

Including the font

The @font-face rule can be used within CSS to include the font. The example below shows how to include the myiconfont that is located in the Fonts subfolder (the path is relative to the CSS file itself – in this example, the CSS is located in the CssStyle).

The name of the font is defined by using font-family making it possible to refer to this font when using it later. One could define a separate font for when it is used as bold or italic, which is why font-weight and font-style need to be specified, but that is quite uncommon practice with icons.

@font-face {
    font-family: ’myiconfont’;
    src:  url(’fonts/myiconfont.eot?6rngo2’);
    src:  url(’fonts/myiconfont.eot?6rngo2#iefix’) format(’embedded-opentype’),
        url(’fonts/myiconfont.ttf?6rngo2’) format(’truetype’),
        url(’fonts/myiconfont.woff?6rngo2’) format(’woff’),
        url(’fonts/myiconfont.svg?6rngo2#myiconfont’) format(’svg’);
    font-weight: normal;
    font-style: normal;
}

You will notice that there are multiple versions of the font that are being included. This is because not all browsers support the same font types, especially legacy browsers. The EOT format is basically only needed for Internet Explorer 8 and lower, the TTF for Android versions below 4.4.4, and SVG is a fallback for bad configured servers / browsers. A case could be made for only supplying WOFF (which is the most widely supported format) but I usually just use the formats that fontastic / icomoon supply.

Including a font is usually done on top of the stylesheet which is more of a convention rather than one of technical performance implications.

Using the icon

There are several methods to use an icon but the most elegant method is to do it using pseudo elements. CSS pseudo elements can be used to insert ‘ghost’ elements purely from CSS using the :before and :after selectors. Using this technique the content attribute can be used to inject the font character into the HTML (and, in our case, into the Framework) and the only requirement is for you to know the logical name in the form of the CSS classname. Using this technique your HTML would like this:

<span class="icon-delivery-transport"></span>

 The CSS would consist of two pieces that should be placed right after the @font-face definition. The first piece is CSS that adds the delivery-transport icon character:

.icon-delivery-transport:before {
    content: "P";
}

 The other piece is generic for all icons of this icon pack and applies CSS to all elements with a classname that starts with icon-.

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: ’myiconfont’ !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
  
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

Obviously the reason to keep this separate is to reduce the amount of CSS per icon font.

Customizing the Framework

In the case of the Web Framework, you do not always control the HTML structure yourself - it is the Framework that generates it on a control-by-control basis. So the question is, where do you want to put the icon?

There are a couple of places where it is common practice to use icons, like the cWebMenuItems, cWebButtons and cWebColumnButtons controls. To create an icon class that works with these components, you could use the following CSS to place the character:

.icon-delivery-transport.Tile_Icon:before,
.icon-delivery-transport button:before,
button.icon-delivery-transport:before,
.icon-delivery-transport > div > span.WebItm_Icon:before {
    content: "P";
}

Note that this works for dashboard tiles as well. The generic piece of CSS that applies the font to these elements changes into:

.Tile_Icon[class^="icon-"]:before,
.Tile_Icon[class*=" icon-"]:before,
[class^="icon-"] button:before,
[class*=" icon-"] button:before,
button[class^="icon-"]:before,
button[class*=" icon-"]:before,
[class^="icon-"] > div > span.WebItm_Icon:before,
[class*=" icon-"] > div > span.WebItm_Icon:before {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: ’myiconfont’ !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

 Using the CSS classname within your application can be done by setting psCSSClass on the control:

Object oButtonWithIcon is a cWebButton
    Set piColumnSpan to 3
    Set psCSSClass to "icon-delivery-transport"
    Set psCaption to "button"
Procedure OnClick
    End_Procedure
End_Object

 Or for a menu item (where the wrapping class should allow icons to be displayed):

Object oItemWithIcon is a cWebMenuItem
    Set psCaption to "MenuItem"
    Set psCSSClass to "icon-delivery-transport"
End_Object

As you can see, adding icon fonts in the DataFlex WebApp Framework is not complicated, and is a simple addition that you can make to keep your applications looking modern and responsive all the while increasing functionality. 

If you have questions regarding icon fonts please visit the DataFlex Web & Mobile Applications Support Forums.

This blog is the fourth in a series about styling DataFlex applications. The others are:

• Introduction to WebApp Styling
• CSS Classnames
• CSS Do’s and Don’ts in the DataFlex Web Framework