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

更改[]和...享受：



    [!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 glyphicon，没有问题，例如

 icon: 'glyphicon glyphicon-menu-left'

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

        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

在＆＃39; w2ui＆＃39;中添加自定义图标工具栏

3 个答案: