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>
结果: