在“w2ui”工具栏中添加自定义图标

Question

如何在w2ui工具栏中添加自定义图标。

我需要在w2ui工具栏中添加重做和撤消图标。

你能让我知道吗？

Answer 1

你可以在w2ui工具栏中使用font、awesome或任何其他基于CSS类的图标。

示例：

$(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);
        }
    });
});

在内部，w2ui会为图标创建一个<span class="fa fa-undo">标签，因此-就像我说的-你可以使用任何其他基于CSS的图标。

现场示例：http://w2ui.com/web/demos/#!toolbar/toolbar-9

注意:这个活生生的例子使用了一个很棒的旧字体版本，其中缺少额外的fa类。

Answer 2

Change []和...享受：

    [!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]

Answer 3

您也可以使用bootstrap字形图标，没有问题，例如

 icon: 'glyphicon glyphicon-menu-left'

但是bootstrap 4不包含fonts文件夹，所以您可以下载bootstrap3并复制项目中的fonts文件夹，该文件夹包含

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

然后转到这里并将此css添加到文件末尾的bootstrap4 css中。

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

并插入复制到项目中的文件夹的正确字体路径。或者，您可以以正确的格式使用每个png，例如这样使用

    <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