Font Icon CSS Class Styles

Extended CSS Class Styles
Web Application Structure and Classes

Font Icons are a special technique developed to implement monochrome icons as vector graphics. These icons can be scaled smoothly to any size, or when the user ‘zooms’ the web page in or out within the browser.

This technique applies a special font which contains the required set of icons. Individual icons are displayed by displaying the character from this font that maps to the required icon.

The new Df_Flat_Touch theme defines a set of font icon CSS classes that can be applied to buttons (cWebButton), column buttons (cWebColumnButton), and menu items (cWebMenuItem) objects. Each CSS class is designed to select a specific icon from the set of font icons in this theme.

To apply a font icon to a cWebButton or a cWebMenuItem, set the psCSSClass property to the appropriate CSS class name, e.g.:

Set psCSSClass to "WebInfo_Icon"

This would style a button object to display the “Info” icon. The Web Order Mobile sample demonstrates the use of font icons in button controls in the DemoCSSClasses.wo view.

To apply a font icon to a cWebColumnButton, set the psBtnCSSClass property to the appropriate CSS class name. Additionally, you need to style the column button with the WebButtonIcon CSS class, e.g.:

Set psBtnCssClass to "WebButtonIcon WebIcon_Info"

This would style a column button object to display the “Info” icon. The Web Order Mobile sample demonstrates the use of font icons in column buttons in the SelectCustomer.wo view. You will also find examples of font icons used by the menu item controls defined in this view.

The remainder of this section documents the set of Font Icon CSS styles that are available in the Df_Flat_Touch theme.

Available Font Icon CSS Classes

WebIcon_Delete
This CSS Class displays the trashcan icon. This icon maps to the font icon character “x”.
WebIcon_Print
This CSS Class displays the printer icon. This icon maps to the font icon character “S”.
WebIcon_Find
This CSS Class displays the find icon. This icon maps to the font icon character “V”.
WebIcon_Add
This CSS Class displays the pencil on page icon. This icon maps to the font icon character “A”.
WebIcon_Info
This CSS Class displays the info icon. This icon maps to the font icon character “M”.
WebSaveMenuItem
This CSS Class displays the simple tick (done) icon. This icon maps to the font icon character “&”.
WebDeleteMenuItem
This CSS Class displays the heavy trashcan icon. This icon maps to the font icon character “?”.
WebPromptMenuItem
This CSS Class displays the backwards leaning magnifying glass icon. This icon maps to the font icon character “\00e005”.
WebClearMenuItem
This CSS Class displays the new document icon. This icon maps to the font icon character “B”.
WebClearAllMenuItem
This CSS Class displays the “X” icon. This icon maps to the font icon character “:”.
WebLastMenuItem
This CSS Class displays the find last icon. This icon maps to the font icon character “|”.
WebNextMenuItem
This CSS Class displays the find next icon. This icon maps to the font icon character “}”.
WebFindMenuItem
This CSS Class displays the find eq icon. This icon maps to the font icon character “`”.
WebPreviousMenuItem
This CSS Class displays the find previous icon. This icon maps to the font icon character “~”.
WebFirstMenuItem
This CSS Class displays the find first icon. This icon maps to the font icon character “{”.
WebEditMenuItem
This CSS Class displays the pencil on a blank page icon. This icon maps to the font icon character “]”.

Previewing the Font Icons

You can preview the font icon character mapping by displaying the following HTML page in your browser:

file:///C:/DataFlex%2018.1%20Examples/WebOrderMobile/AppHTML/CssThemes/Df_Flat_Touch/Fonts/icons-reference.html

This will display the full set of font icons available in the Df_Flat_Touch theme and the character mapping relating to each font.

Declaring Additional Font Icon CSS Classes

The Df_Flat_Touch theme does not implement the full set of available font icons. If you wish to display an icon from the available set that is not defined by one of the above CSS Classes, you would need to define your own CSS class for that icon.

You would declare these CSS classes in your workspace’s application.css file.

cWebMenuItem

.MyPaperclipIcon > div > span.WebItm_Icon:before {
    content: "g";
}

The above example demonstrates how you would declare a CSS Selector for displaying the paperclip font icon in a cWebMenuItem. You would need to set the psCSSClass property in the cWebMenuItem object as follows:

Set psCSSClass to "MyPaperclipIcon"

cWebButton

.MyPaperclipIcon button:before {
    content: "g";
}

The above example demonstrates how you would declare a CSS Selector for displaying the paperclip font icon in a cWebButton. You would need to set the psCSSClass property in the cWebButton object as follows:

Set psCSSClass to "MyPaperclipIcon"

cWebColumnButton

button .MyPaperclipIcon:before {
    content: "g";
}

The above example demonstrates how you would declare a CSS Selector for displaying the paperclip font icon in a cWebColumnButton. You would need to set the psBtnCSSClass property in the cWebColumnButton object as follows:

Set psBtnCSSClass to "WebButtonIcon MyPaperclipIcon"

cWebListSwipeButton

.MyPaperclipIcon:before {
    content: "g";
}

The above example demonstrates how you would declare a CSS Selector for displaying the paperclip font icon in a cWebListSwipeButton. You would need to set the psCSSClass property in the cWebListSwipeButton object as follows:

Set psCSSClass to "MyPaperclipIcon"

Combined Definition

.MyPaperclipIcon:before,
.MyPaperclipIcon button:before,
button .MyPaperclipIcon:before,
.MyPaperclipIcon > div > span.WebItm_Icon:before {
    content: "g";
}

The above example demonstrates how you declare a CSS selector for displaying the paperclip icon in one go for the cWebMenuItem, cWebButton, cWebColumnButton, cWebListSwipeButton, and for dashboard tiles.

Previous Topic: Extended CSS Class Styles
Next Topic: Web Application Structure and Classes