vis.js和fontawesome字形图标

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

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

通过使用'图标'作为我们使用bootstrap或fontawesome字形图标的样式。该文件谈到了使用unicodes。

创建一个Plunker和图标不显示。

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

不知道我在做什么错。

感谢

来源

2015-04-17 Sateesh Kommineni

我看了看你plunker，我在这里固定它：

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

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

第二，通过你的蹦床，你设置节点的形状为'圆'。这意味着节点不会关心图标选项。在你的问题中，你已经将节点形状设置为'图标'。这意味着，节点将使用其他图标选项来配置图标。

所以我们增加（全球节点选项）：
iconFontFace： 'FontAwesome'，
iconSize：50

现在的统一。你需要指定哪个图标可以显示给你。这由图标选项完成。那么我们在哪里可以找到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

祝你好运！

来源

2015-04-20 09:14:14 Alexdm

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

vis.js和fontawesome字形图标

回答

相关问题