Add custom icons in 'w2ui' toolbar

问题

How to add custom icons in w2ui toolbar.

I need to add redo and undo icons in w2ui toolbar.

Could you please let me know?

回答1:

You can use font awesome or any other CSS class based icons in a w2ui toolbar.

Example:

$(function () {
    $('#toolbar').w2toolbar({
        name: 'toolbar',
        items: [
            { type: 'button', id: 'item1', text: 'Undo', icon: 'fa fa-undo' },
            { type: 'button', id: 'item2', text: 'redo', icon: 'fa fa-repeat' }
        ],
        onClick: function (event) {
            console.log('Target: '+ event.target, event);
        }
    });
});

Internally, w2ui will create a <span class="fa fa-undo"> tag for the icon, thus - like I said - you can just use any other CSS based icons.

Live example: http://w2ui.com/web/demos/#!toolbar/toolbar-9

Note: the live example uses an old font awesome version, where the extra fa class is missing.

回答2:

Change [] and ... Enjoy:

    [!DOCTYPE html]
    [html][head][title]W2UI Demo: toolbar-1[/title]
      [link rel="stylesheet" href="http://w2ui.com/web/css/font-awesome/font-awesome.min.css"]
      [link rel="stylesheet" href="http://w2ui.com/src/w2ui-1.5.rc1.min.css"]
      [script type="text/javascript" src="http://w2ui.com/web/js/jquery-2.1.1.min.js"][/script]
      [script type="text/javascript" src="http://w2ui.com/src/w2ui-1.5.rc1.min.js"][/script]
      [style] 
        .MyIcon1 { content:url('MyLocalIcon.png'); } 
        .MyIcon2 { content:url('https://www.gstatic.com/inputtools/images/tia.png'); } 
      [/style]
    [/head]
    [body]
    [div id="toolbar" style="padding: 4px; border: 1px solid #dfdfdf; border-radius: 3px"][/div]
    [script type="text/javascript"]
      $(function () {
        $('#toolbar').w2toolbar({
           name: 'toolbar',
           items: [ { type: 'button', id: 'btn1', text: 'Undo', icon: 'fa-undo' }, //icon get from: font-awesome
                    { type: 'button', id: 'btn2', text: 'Redo', icon: 'fa-repeat' }, //icon get from: font-awesome
                    { type: 'button', id: 'btn3', text: 'Local Icon', icon: 'MyIcon1' }, //local file
                    { type: 'button', id: 'btn4', text: 'Net Icon', icon: 'MyIcon2' } ] //internet link to file
        });
      });
    [/script]
    [/body]
    [/html]

回答3:

You can use also bootstrap glyphicon with no problem, example

 icon: 'glyphicon glyphicon-menu-left'

But bootstrap 4 doesn't include fonts folders so you can download bootstrap3 and copy the fonts folder in you project , the folder contains

        glyphicons-halflings-regular.eot
        glyphicons-halflings-regular.svg
        glyphicons-halflings-regular.ttf
        glyphicons-halflings-regular.woff
        glyphicons-halflings-regular.woff2

and after go here and add this css in bootstrap4 css at the end of the file..

https://gist.github.com/planetoftheweb/5d75a1ad45eb3059710747a3695fc068

and insert the right font path of your folder copied in your project. Or you can use every png in right format for example in this way

    <style type="text/css">

        .icona:before{ 
            content:url('yourUrl.png'); 
        }

    </style>    

    <script type="text/javascrpt">
       //Your w2ui object....
       { type: 'button', id: 'item1', text: 'Undo', icon: 'icona' },
    </script

来源：https://stackoverflow.com/questions/42092892/add-custom-icons-in-w2ui-toolbar