vis.js 和 fontawesome 字形图标

Question

在使用 vis.js 创建图形时，我们可以使用选项指定如何显示节点。

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

通过使用“icon”作为样式，我们使用 bootstrap 或 fontawesome 字形图标。该文档讨论了使用 unicodes。

创建了一个Plunker，但图标没有显示出来。

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

不知道我做错了什么。

谢谢

Answer 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',
iconSize:50

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

fa-coffee · Unicode: f0f4 · Created: v3.0 · Categories: Web Application Icons

所以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

祝你好运！