Icons can be nested into all components and their items. You can put icon on the toolbar in form of buttons, decorate tabbar tabs, accordion panes as well as list and dataview items with them, etc.
Icons can be initialized in three ways:
Icons are taken from the Font Awesome collection. There you can find plenty of icons to your choice and pick their names to insert them in your apps.
UI-related icon looks like a button with a border. Text label for this icon type is not supposed.
{ view:"icon", icon:"mail"},
{ view:"icon", icon:"users"}
The value for an icon property is the name of the needed icon.
type:"icon" |
![]() |
type:"iconTop" |
![]() |
type:"iconButton" |
![]() |
type:"iconButtonTop" |
![]() |
{ view:"button", type:"icon", icon:"mail", label:"Mail", width:80 }
This method of icon initialization fits the components and items that don't normally take buttons - tabs (they are buttons themselves), panes, list and dataview items, datatable cells. In this case, icons are not buttons and perform a decorative function.
Possible CSS classesare as follows:
Both of them include an icon name that can be checked on Font Awesome site.
Multiview tabs
{ view:"tabbar", options:[
{ value:"mail", label:"Mail", css:"webix_icon fa-envelope"},
{ value:"users", label:"Users", css:"webix_icon fa-users"},
{ value:"cog", label:"cog" , css:"webix_icon fa-cog"}
]}
An additional HTML element with an 'icon' class can be added to the text value of any component item:
AccordionItem pane with an icon
{ header:"<span class='webix_icon fa-envelope'></span>Mail"}
List item with an icon
{ template:"<span class='webix_icon fa-#icon#'></span> #name#"}
Here the icon's name is in hash signs since it comes from the dataset, e.g. in JSON it looks like
var data=[
{id:1, name:"item1", icon:"envelope"},
{id:2, name:"item2", icon:"users"}
]
Default FontAwesome icons that are used for various controls can be changed to custom ones in several ways.
If you'd like to use another icon from FontAwesome collection instead of the default one, specify its name as value of icon property:
{view:"richselect", label: 'Other', options:options, icon:"caret-down"}
As a result, the default richselect) icon, "fa-angle-down", is replaced with the one you've set.
To set a custom icon that you can provide as a background-image, write the new CSS rule that redefines the default one. Nothing is changed in the control configuration:
{view:"combo", label: 'Fruit', options:[...] }
As with richselect, combo control uses "fa-angle-down" icon which CSS should be modified:
.webix_input_icon.fa-angle-down:before{
content:""; /*removes FontAwesome icon */
background-image: url("search.png");
width:20px;
height:20px;
display:block;
}
Related sample: Styling Combo Icons
If you want to style one combo on the page while leaving another one unchanged, define a separate css class for the one in question:
{view:"combo", label: 'Fruit', options:[...], css:"custom" }
Then the necessary CSS will look like this:
.custom .webix_input_icon.fa-angle-down:before{
...
}
Component styling is described in detail in the corresponding article of the documentation.
Back to top