'w2ui'ツールバーにカスタムアイコンを追加する

Question

w2uiツールバーにカスタムアイコンを追加する方法。

w2uiツールバーにredoとundoのアイコンを追加する必要があります。

お知らせください。

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

あなたは何の問題もなくまた、ブートストラップglyphiconを使用することができ、例えば、

icon: 'glyphicon glyphicon-menu-left' 

しかし、ブートストラップ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

し、プロジェクトにコピーされたフォルダの右のフォントパスを挿入します。 それとも、こんにちはあなたの質問のみw2uiバッジを持っていsriniこのよう

<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