w2ui - 在“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

您也可以毫无问题地使用引导 glyphicon，例如

 icon: 'glyphicon glyphicon-menu-left'

但 bootstrap 4 不包含字体文件夹，因此您可以下载 bootstrap3 并复制项目中的字体文件夹，该文件夹包含

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

然后去这里并在文件末尾的bootstrap4 css中添加这个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

Answer 3

更改 [] 和 ... 享受：

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