Fügen Sie benutzerdefinierte Symbole in der 'w2ui' Werkzeugleiste hinzu

Question

Wie Sie benutzerdefinierte Symbole in der w2ui Symbolleiste hinzufügen.

Ich muss Redo hinzufügen und Symbole in W2ui Symbolleiste rückgängig machen.

Könnten Sie bitte lassen Sie mich wissen?

Answer 1

Sie können font awesome oder andere CSS-basierte Symbole in einer w2ui-Symbolleiste verwenden.

Beispiel:

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

Intern wird w2ui einen <span class="fa fa-undo"> Tag für das Symbol erstellen, so dass - wie ich schon sagte - man kann einfach alle anderen CSS-basierte Symbole verwenden.

anschauliches Beispiel: http://w2ui.com/web/demos/#!toolbar/toolbar-9

Hinweis: Das Live-Beispiel verwendet eine alte Schrift genial Version, wo die zusätzliche fa Klasse fehlt.

Answer 2

ändern [] und ... Genießen Sie:

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

Sie können ohne Probleme auch Bootstrap glyphicon verwenden, zB

icon: 'glyphicon glyphicon-menu-left' 

Aber 4 Bootstrap enthalten Schriftarten keine Ordner, so dass Sie herunterladen bootstrap3 und kopieren Sie die Schriftart-Ordner in Ihrem Projekt enthält der Ordner

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

und nach gehen Sie hier und fügen Sie diese CSS in bootstrap4 CSS am Ende der Datei ..

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

und legen Sie den richtigen Schriftart Pfad des Ordners in Ihrem Projekt kopiert. Oder Sie können jedes png in richtigen Format beispielsweise auf diese Weise

<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