cytoscape js使用fontawesome动态更新节点标签

Question

例：

https://jsfiddle.net/bababalcksheep/ajhnmcrb/16/

需要什么：我想动态更改节点的内容名称，我想在其中使用字体awesome图标作为Unicode。

尝试：如果我使用内容：'\uf173'，字体呈现正确。但是，如果我想用新的字体Unicode更新节点标签，它不起作用。它只是打印\uf173而不是字体

我正在使用输入<input type="text" value="\uf173" id="title">来更改id e cy.$('#e')的节点以更改其内容。

   $('#title').on('input', function() { 
         cy.$('#e').css({
          content:   $('#title').val()
        });
   });

Answer 1

如果在代码中指定了unicode转义字符，则只能在HTML value中使用。如果在输入中键入\ uf173，则其值为'\\uf173'。如果要将类似的类型字符串识别为unicode转义值，则必须解析。或者您必须让用户使用某种OS系统键序列实际键入您想要的实际值。

或者只是追加价值。我不希望用户输入类似的东西：label: function( node ){ return '\uf173' + node.data('label'); }

Answer 2

解决方案：https://jsfiddle.net/bababalcksheep/ajhnmcrb/120/

我想到了字体图标

1. 将它们附加到正文并使用.content（）获取其角色
2. 使用char返回的标签是typeof string

 function font_to_char(classname) {
   var span = document.createElement('span');
   span.className = classname;
   span.style.display = 'none';
   document.body
     .insertBefore(span, document.body.firstChild);
   var char = window
     .getComputedStyle(span, ':before')
     .content
     .replace(/'|"/g, '');
   span.remove();
   return char;
 }