vis.js使用font-awesome时，字体显示为一个小方块，firefox下面直接不显示

框架：Vue.js

使用：

main.js:

import 'font-awesome/css/font-awesome.css';

webpack.base.conf.js:

{
        test: /node_modules[\\\/]vis[\\\/].*\.js$/, // vis.js files
        loader: 'babel-loader',
        query: {
          cacheDirectory: true,
          presets: [ "babel-preset-es2015" ].map(require.resolve),
          plugins: [
            "transform-es3-property-literals", // see https://github.com/almende/vis/pull/2452
            "transform-es3-member-expression-literals", // see https://github.com/almende/vis/pull/2566
            "transform-runtime" // see https://github.com/almende/vis/pull/2566
          ]
        }
      },

vis.js渲染代码：

let containerFA = document.getElementById('mynetwork'),
	nodesFA = [...this.routes, ...this.networks, ...this.instances],
	edges = [],
 	optionsFA = {
        groups: {
          route: {
            shape: 'icon',
            icon: {
              face: 'FontAwesome',
              code: '\uf05b',
              size: 50,
              color: '#222222'
            }
          },
          instance: {
            shape: 'icon',
            icon: {
              face: 'FontAwesome',
              code: '\uf26c',
              size: 50,
              color: '#222222'
            }
          },
          network: {
            shape: 'icon',
            icon: {
              face: 'FontAwesome',
              code: '\uf1de',
              size: 50,
              color: '#222222'
            }
          }
        }
      };

      console.log(nodesFA);
  // create an array with nodes
  this.networks.map((net) => {
  	if(net.route_id) edges.push({from: net.route_id, to: net.id})
  });
  this.instances.map((instance) => {
  	if(instance.network_id) edges.push({from: instance.network_id, to: instance.id})
  });

  // create a network
  let dataFA = {
    nodes: nodesFA,
    edges: edges
  };

  let networkFA = new Network(containerFA, dataFA, optionsFA);

显示结果：

解决方法：在canvas前面添加一个标签，先渲染一个fonticon

<i class="fa fa-television" style="visibility:hidden;"> </i>

 结果：

 

转载于:https://www.cnblogs.com/undefined-h/p/8513281.html