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

【问题标题】：Add custom icons in 'w2ui' toolbar在“w2ui”工具栏中添加自定义图标
【发布时间】：2018-02-18 05:13:56
【问题描述】：

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

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

你能告诉我吗？

【问题讨论】：

嗨 srini，您的问题只有 w2ui 徽章。因此，可以看到您的问题的人数变得太少。请添加其他徽章，如 javascript 等。
...此外，建议分享更多出轨。
欢迎来到 StackOverflow。为了帮助其他人帮助您，您应该提供到目前为止您尝试过的代码示例。请记住，StackOverflow 不是代码编写服务。

标签： w2ui

【解决方案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 类。

【讨论】：

【解决方案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]

【讨论】：

【解决方案3】：

您也可以毫无问题地使用引导 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

然后转到此处并将此 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

【讨论】：