Blog

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. change icons UI

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:

  @import url(//fonts.googleapis.com/css?family=Arvo);
  .webix_view{ font-family:Arvo, serif; }

Live Demo >>

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:
how to customize icon in JavaScript

webix.ui({ view:"combo", options:list_data //, icon:"cog"});

Live Demo >>

Of course, you are free to use “awesome” CSS classes for all the HTML elements you add within a Webix-based app:

webix.ui({  
         view:"list",  
         template:"<span class='webix_icon fa-file-video-o'></span> #value# "
});

Live Demo >>

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:

.webix_ss_sort_asc { font-family: FontAwesome; }
.webix_ss_sort_asc:before { content: '\f106'; } //fa-angle-up

Luckily, customization is still possible and the simplest option is setting another Font Awesome icon. In this case all you need is to check its Unicode and replace the content of the needed icon.

How to change icon at JavaScript UI

It can be done for either a particular Datatable column:

//js
view:"datatable", columns:[
      { id:"title", header:{text:"Film title", css:"custom"}, sort:"string"}
]
//css
.webix_hcell.custom .webix_ss_sort_asc:before { content: '\f0a6'; } //fa-hand-o-up

Live Demo >>

Or for a single Datatable:

//js
view:"datatable", css:"custom"
//css
.custom .webix_ss_sort_asc:before { content: '\f0a6'; } //fa-hand-o-up

Live Demo >>

Or for all the Datatables in the project (globally):

.webix_ss_sort_asc:before { content: '\f0a6'; } //fa-hand-o-up

Live Demo >>

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:

//remove Font Awesome content
.webix_accordionitem_header .webix_accordionitem_button:before {
    content:'' !important;
}
//set custom icons
.webix_accordionitem_header .webix_accordionitem_button {
    background-image: url(...);
}
.webix_accordionitem_header.collapsed .webix_accordionitem_button {
    background-image: url(...);
}
replacing icons at javaScript

Live Demo >>

Need more styling?

Then you can dive into the general documentation on styling, study CSS image maps of Webix widgets or go through specific guidelines, e.g. on the customization of tree nodes.

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 :)

Written by
The following two tabs change content below.
Olga Kustova

Olga Kustova

Front-end web developer fond of high-quality code and effective design. Is eager to share all the tips and tricks regarding Webix usage with wide audience.
All posts: