Using Custom Fonts and Custom Icons for Webix Widgets

“Never judge a book by its cover”, — my teacher told me many a time, but still I cannot deny that good design opens all doors, especially in web development. Since colorful and motley interfaces passed into oblivion long time ago, font and icons became a small but significant detail that can add a unique aesthetic touch to web apps. In this article we will speak about conventional ways of altering font and icons within Webix widgets.

Managing font in Webix widgets

The most popular skins load custom fonts. The default Flat skin and its variations, Compact and Contrast, use Pt Sans while the Material skin benefits from a stylish Roboto one. Other skins just rely on system fonts like Arial or Verdana.

You can change the overall font by adding the corresponding CSS rule to webix_view class:

Managing icons in Webix widgets

You can see here and there that Webix widgets are supplied with own icons that indicate their functional parts. You can spot them in Tree nodes, on a Datatable header, in the input areas of Form controls, etc.

Most Webix skins use the Font Awesome iconic font to populate widgets with icons. However, Air, AirCompact and Clouds skins as well as Webix Tree play around with base64-encoded image icons.

Altering Font Awesome Icons

Webix stylesheet includes a set of predefined CSS classes to match the list of available FA icons. These classes are mainly used by Form controls. For instance, Combo input area is styled with webix-input-icon fa-angle-down CSS to show a dropdown icon in its field. At the same time, this icon can be easily customized:

The above way is cute and straightforward, but your “wow” will sound quite disappointed when you realize that most of the widgets’ icons lie far beyond configuration possibilities. That’s how Datatable sorting icons are set:

Custom, but still awesome

To replace Font Awesome icons with custom ones, you will need to perform more tricky actions. Firstly, you should remove FA content from a pseudo-class (:before) definition and, secondly, provide your own icon:

Need more styling?

Also, you may check the list of available Webix skins or play with Skin Builder to compile a custom skin. With the latter you can select the overall font, choose bar and button colors as well as dimensions of basic elements – all by visual means.

I hope that now you can spread your designer creativity around the web and provide end users with even better experience. At the same time, Webix will perform all the hard labour of HTML painting and data management so that the first impression you provide to your users can turn into a life-time loyalty 🙂