Toolbar: Button with Font-Awesome icon

Webix JS
1

I am unable to create a toolbar button that uses a Font Awesome icon. How can I do this?

Here is a sample I am trying to create:

    {
        view: "toolbar",
        cols: [
            {
                view: "button",
                type: "icon",
                css: "webix_icon fa-pencil-square",
                on: {
                    "onItemClick": function () {
                        console.log("fa-pencil-square click");
                    }
                }
            }]
    }
2

I seem to have hacked through it using this:

            {
                view: "button",
                type: "htmlbutton",
                css: "icon_btn",
                label: "<span class='webix_icon fa-icon fa-pencil-square'>",
                on: {
                    "onItemClick": function() {
                        console.log("fa-pencil-square click");
                    }
                }
            }
3

However, the button background is white and icon itself matches the color of the toolbar. I would much rather see the icon being white and the button matching the toolbar color. How can I do this? Using some CSS I believe.

Also, how can I make the icons bigger?

4

You don’t need to define an icon using the label. Several types of the buttons have the property ‘icon’.

If you want to customize your icons, it can be done via CSS styling

Check this article:
http://docs.webix.com/desktop__icon_types.html#buttonwithanicon

And the snippet:
http://webix.com/snippet/980a33f3