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

Question

示例：

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

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

尝试次数： 如果我使用 content: '\uf173' ，字体会正确呈现。但是如果我想用新字体 Unicode 更新节点标签，它就不起作用。它只是打印 \uf173 而不是 font

我正在使用输入 <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/

我想到了字体图标

将它们附加到主体并使用 .content()
使用原样返回的字符作为字符串类型的标签

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; }

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

cytoscape js updating node label dynamically with fontawesome

javascript

html

cytoscape.js