vis使用icon

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 刷新加载不出来​​​​​​​