jsTree のコンテキストメニューにアイコンを設定

jsTree のコンテキストメニューをカスタマイズ - Oboe吹きプログラマの黙示録
に続き、CSS疑似要素で、フォントアイコンを書く - Oboe吹きプログラマの黙示録
を書いたことを利用して、コンテキストメニューにアイコンを設定します。
今回も、Fontello - icon fonts generator を使います。
表示するアイコンのCSS、
全てのアイコンの外観は、contextmenu-icon クラスとして定義します。

@font-face{
   font-family: 'fontello';
   src: url('font/fontello.eot');
   src: url('font/fontello.eot#iefix') format('embedded-opentype'),
        url('font/fontello.woff') format('woff'),
        url('font/fontello.ttf') format('truetype'),
        url('font/fontello.svg#fontello') format('svg');
   font-weight: normal;
   font-style: normal;
}
.contextmenu-icon{
   font-family: "fontello";
   font-style: normal;
   font-weight: normal;
   font-size: 16px;
   display: inline-block;
   text-decoration: inherit;
   cursor: pointer;
   color: #0085c9;
   margin: 1px 1px;
}
/**
 * folder-plus  
 */
.contextmenu-icon.folder-plus::before{ content : "\00ecf2"; }

/**
 * file-plus     
 */
.contextmenu-icon.file-plus::before{ content : "\00ed2a"; }

/**
 * rename        
 */
.contextmenu-icon.rename-icon::before{ content : "\00e801"; }

/**
 * delete        
 */
.contextmenu-icon.delete-icon::before{ content : "\00ec43"; }

/**
 * Cut           
 */
.contextmenu-icon.cut-icon::before{ content : "\00e88a"; }

/**
 * Copy          
 */
.contextmenu-icon.copy-icon::before{ content : "\00f24d"; }

/**
 * Paste         
 */
.contextmenu-icon.paste-icon::before{ content : "\00f0ea"; }

jsTree コンテキストメニュー定義するJSの一部分です。(action など長い部分は省略)
各メニューの "icon" 属性に、contextmenu-icon と 各々アイコンの2つのクラス名を書きます。

"contextmenu":{
   "items":function($node){
      return {
         "createFolder":{
            "separator_before": false, "separator_after": false,
            "icon": "contextmenu-icon folder-plus",
            "label": "新規フォルダ作成",
            "_disabled": function(data){===(省略)=== },
            "action": function(data){ ===(省略)===  }
         },
         "createFile":{
            "separator_before": false, "separator_after": false,
            "icon": "contextmenu-icon file-plus",
            "label": "新規ファイル作成",
            "_disabled": function(data){===(省略)=== },
            "action": function(data){ ===(省略)===  }
         },
         "rename":{
            "separator_before": true, "separator_after": false,
            "icon": "contextmenu-icon rename-icon",
            "label": "名称の変更",
            "_disabled": false,
            "action": function(data){ ===(省略)===  }
         },
         "remove":{
            "separator_before": false, "separator_after": false,
            "icon": "contextmenu-icon delete-icon",
            "label": "削除",
            "_disabled": function(data){===(省略)=== },
            "action": function(data){ ===(省略)===  }
         },
         "cut":{
            "separator_before": true, "separator_after": false,
            "icon": "contextmenu-icon cut-icon",
            "label": "切り取り",
            "_disabled": function(data){===(省略)=== },
            "action": function(data){ ===(省略)===  }
         },
         "copy":{
            "separator_before": false, "separator_after": false,
            "icon": "contextmenu-icon copy-icon",
            "label": "コピー",
            "_disabled": function(data){===(省略)=== },
            "action": function(data){ ===(省略)===  }
         },
         "paste":{
            "separator_before": false, "separator_after": false,
            "icon": "contextmenu-icon paste-icon",
            "label": "貼り付け",
            "_disabled": function(data){===(省略)=== }
            "action": function(data){ ===(省略)===  }
         }
      };
   }
}

このようになります。
f:id:posturan:20180924102039j:plain