Sencha Font Packages

ExtJS comes shipped with three web font packages for use with your application. These web fonts can be used to specify icons for use with components that provide either the iconCls or glyph config properties.

Available Font Packages

The three font packages and information about them are included in the following table :

Note: Ext JS 7.x supports Font Awesome version 5.6.3+. For a list of all available Font Awesome icons, please check out the Font Awesome Cheatsheet.

Font packages are included by specifying the font package name (above) in the requires array of your app.json file (for applications) or package.json file (for theme/code packages) :

// Require the Pictos font package
"requires": [
   "font-pictos"
]

Once required by your application, you may display the font icons using either the iconCls or glyph config properties.

iconCls Usage

The iconCls config allows you to take advantage of predefined css styles in the packages that map to web font characters with meaningful names (eg home, help, info)

Referencing an icon using the iconCls config property is pretty straightforward and is done by specifing an iconCls in the following format:

iconCls: '{fontCls} {iconPrefix}-{iconName}'

The {fontCls} and {iconPrefix} values for each font package are shown in the above table. The {iconName} for each icon is found in the detailed font package tables at the end of this guide.

For example, to specify the Pictos home icon, you would specify your iconCls property as:

iconCls: 'pictos pictos-home'

Similiarly, to specify the Font Awesome home icon, you would specify your iconCls property as:

iconCls: 'x-fa fa-home'

glyph Usage (Classic Toolkit Only)

In the Classic Toolkit, many components (eg, buttons and menu items) have a glyph config which permits using either a character or hex code to indicate the index position of the icon within the font file.

For example, using the Picos home icon as an example, you would specify your glyph property as:

glyph: 'H'

or even

glyph: 'x48' // ASCII 'H'

If you have multiple font packages in your application, you can specify the font family to use by providing the family name as such:

glyph: 'x48@FontAwesome'

Font Icon Tables

Below are reference tables which provide you with a list of the available icons found in each of the Font packages. The tables show the icon itself, its character or hex code for use with the glyph config property and the CSS class name to use for the iconCls config property (see above).

ExtJS Font Package

Pictos Font Package