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，你将节点的形状设置为 'circle'。这意味着节点不会关心图标选项。在您的问题中，您已将节点形状设置为 'icon'。这意味着，节点将使用额外的图标选项来配置图标。

所以我们添加（到全局节点选项）：
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

总结一下，下次您遇到问题时，请 post 在我们的 Github 页面中提出问题，我们会尝试在那里收集所有问题 :)

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

祝你好运！

vis.js 和 fontawesome 字形图标

vis.js and fontawesome glyph icons

font-awesome

chap-links-library

vis.js