vis.js 和 fontawesome 字形图标答案

【问题标题】：vis.js and fontawesome glyph iconsvis.js 和 fontawesome 字形图标
【发布时间】：2015-04-20 18:16:22
【问题描述】：

在使用 vis.js 创建图表时，我们可以使用选项指定节点的显示方式。

var options = {
  width: '400px',
  height: '400px',
  edges:{
    style:'arrow'
  },
  nodes:{
    shape:'icon'
  }
};

通过使用 'icon' 作为样式，我们可以使用 bootstrap 或 fontawesome 字形图标。该文档讨论了使用 unicode。

创建了一个 Plunker，但图标未显示。

http://plnkr.co/edit/DFYz26SOxGY9IvMqSuKm?p=preview

不知道我做错了什么。

谢谢

【问题讨论】：

标签： font-awesome chap-links-library vis.js

【解决方案1】：

我查看了您的 plunker，并在此处修复了它：

http://plnkr.co/edit/NQarGkQSYeg3Cl0SdBGy?p=preview

我是 vis.js 的开发人员之一，我想解释一下这里出了什么问题。首先，您需要包含 fontawesome 的 css，以便 vis 知道在哪里可以找到字形。所以我们添加： < link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

其次，通过您的 plunker，您将节点的形状设置为“圆形”。这意味着节点不会关心图标选项。在您的问题中，您已将节点形状设置为“图标”。这意味着，节点将使用附加图标选项来配置图标。

所以我们添加了（到全局节点选项）：
iconFontFace:'FontAwesome',
图标大小：50

现在是 unicode。您需要指定应该向您显示哪个图标。这是通过图标选项完成的。那么我们在哪里可以找到 unicode 呢？让我们看看这个例子：http://fortawesome.github.io/Font-Awesome/icon/coffee/ 我们发现：

fa-coffee · Unicode：f0f4 · 创建：v3.0 · 类别：Web 应用程序图标

所以unicode是f0f4，在javascript中我们把它写成

\uf0f4

根据您的问题，我注意到图标没有默认设置，将在 4.0 版本中修复。

如需进一步参考，您可以查看文档：

http://visjs.org/docs/network.html#Nodes_configuration

一个带有来自 fontawesome 和 Ionicons 的多个图标的工作示例：

http://visjs.org/examples/network/38_node_as_icon.html

总结一下，下次您有问题时，请将其发布到我们的 Github 页面，我们会尝试收集那里的所有问题 :)

https://github.com/almende/vis/issues

祝你好运！

【讨论】：

非常感谢您的详细解释。我确实使用了“图标”（不是在我的 plunker 代码中，而是在我的帖子中）。我如何使用不正确的 unicode 并且没有指定 iconSize 和 iconFontFace。