1.页面中引用
import 'font-awesome/css/font-awesome.min.css'
2.options中配置
shape: 'icon', // 节点的外观
icon: {
face: 'FontAwesome',
code: '\uf2bb',
weight: 5,
size: 40,
color:'#2B7CE9'
}
3.code在哪里寻找?
1)打开FontAwesome
2)F12选中dom,找到::before对应的css,如图:
3)可以看到是\f2bb直接把f换成uf就可以,如:
\f2bb => \uf2bb
4.全部代码
<template>
<div>
<div id="mynetwork"></div>
</div>
</template>
<script>
const vis = require('vis-network/dist/vis-network.min.js')
require('vis-network/dist/dist/vis-network.min.css')
import 'font-awesome/css/font-awesome.min.css'
export default {
data() {
return {
nodes: new vis.DataSet([
{ id: 1, label: '字母' },
{ id: 2, label: 'A' },
{ id: 3, label: 'B' },
{ id: 4, label: 'C' },
{ id: 5, label: 'D' }
]),
edges: new vis.DataSet([
{ from: 1, to: 2 },
{ from: 1, to: 3 },
{ from: 1, to: 4 },
{ from: 1, to: 5 }
]),
color: ['#ef9a9a','#f8bbd0','#ce93d8','#b39ddb','#7986cb','#90caf9','#81d4fa']
}
},
mounted() {
var container = document.getElementById('mynetwork');
var data = {
nodes: this.nodes,
edges: this.edges
};
var options = {
nodes: { // 节点
shape: 'icon', // 节点的外观
icon: {
face: 'FontAwesome',
code: '\uf2bb',
weight: 5,
size: 40,
color:'#2B7CE9'
}
}
};
var network = new vis.Network(container, data, options);
}
}
</script>
<style scoped>
#mynetwork {
width: 500px;
height: 500px;
border: 1px solid lightgray;
}
</style>
效果如下:
下一篇: vis使用icon 刷新加载不出来