Star

JavaScript toolbar

Adding custom icons

The following example shows how to add custom image icons to your toolbar.




Source code

<html>
<script src="https://jsuites.net/v3/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v3/jsuites.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<div id='toolbar'></div>

<script>
<div id='toolbar'></div>
jSuites.toolbar(document.getElementById('toolbar'), {
    container: true,
    items:[
    {
        type: 'icon',
        content: '<img src="https://image.flaticon.com/icons/svg/95/95645.svg" width="24px;">',
        title: 'Message',
        onclick: function() {
            // Do something
            console.log('Message');
        }
    },
    {
        type: 'icon',
        content: '<img src="https://image.flaticon.com/icons/svg/733/733547.svg" width="24px;">',
        title: 'Facebook',
        onclick: function() {
            // Do something
            console.log('Facebook,etc');
        }
    }]
})
</script>
</html>