“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 Material skin and its Mini variation use the stylish Roboto font, while the Flat skin and its variations, Compact and Contrast, use Pt Sans.
You can change the overall font by adding the corresponding CSS rule to webix_view class:
.webix_view{ font-family:Arvo, serif; }
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.
Webix includes a limited set of icons used by widgets – WXI icons. For the Material and Mini skins, the icons are from the Material design set, the Flat, Compact, and Contrast use the Font Awesome iconic font to populate widgets with icons.
Altering Default Icons
Webix stylesheet includes a set of predefined CSS classes to match the list of available icons. These classes are mainly used by Form controls. For instance, Combo input area is styled with webix_input_icon wxi-menu-down CSS to show a dropdown icon in its field. At the same time, this icon can be easily changed:
view:"combo", options:list_data, icon:"wxi-pencil"
});
Of course, you are free to use “material”, “awesome” or any other CSS classes for all the HTML elements you add within a Webix-based app. Include the necessary icon stylesheet and add the classes:
view:"combo", options:list_data, icon:"mdi mdi-account"
});
webix.ui({
view:"list",
template:"<span class='webix_list_icon far fa-file-video'></span> #value#"
});
You can read more about icon usage in this documentation article.
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:
font-size: 20px;
font-family: "Webix Material Icons";
top: 50%;
line-height: 1px;
bottom: auto;
right: 2px;
float: none;
width: 20px;
}
.wxi-angle-down:before { content: "\F001"; } //wxi-angle-down
Luckily, customization is still possible and the simplest option is setting another WXI icon. In this case all you need is to check its Unicode and replace the content of the needed icon.
It can be done for either a particular Datatable column:
view:"datatable", columns:[
{ id:"title", header:{text:"Film title", css:"custom"}, sort:"string" }
]
//css
.webix_hcell.custom .webix_ss_sort_asc:before { content: '\f037'; } //wxi-angle-double-down
Or for a single Datatable:
view:"datatable", css:"custom"
//css
.custom .webix_ss_sort_asc:before { content: '\f037'; } //wxi-angle-double-down
Or for all the Datatables in the project (globally):
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 🙂
