visjs Network

Testing for fontAwesome icon after text

by satyat

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.12.0/vis.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.12.0/vis.min.css">
<div class='cls1'>
  FontAwesome
</div>
<div id="mynetwork"></div>

CSS

#mynetwork {
      width: 600px;
      height: 400px;
      border: 1px solid lightgray;
    }
    
    .cls1:after {
      font-family: 'FontAwesome';
      content: "\f0e7";
      padding: 0 5px 0 15px;
    }

JavaScript

var nodeSet = [{
  id: 1,
  shape: 'icon',
  icon: {
    face: 'FontAwesome',
    code: '\uf230',
    size: 50,
    color: '#57169a'
  },
  label: '1: fa-facebook-official - uf230'
}, {
  id: 2,
  shape: 'icon',
  icon: {
    face: 'FontAwesome',
    code: '\uf1d1',
    size: 50,
    color: '#f0a30a'
  },
  label: '2: fa-empire - uf1d1'
}];

// create an array with nodes
var nodes = new vis.DataSet(nodeSet);

// create an array with edges
var edges = new vis.DataSet([{
  from: 1,
  to: 2
}]);

// create a network
var container = document.getElementById('mynetwork');
var data = {
  nodes: nodes,
  edges: edges
};
var options = {
  edges: {
    arrows: 'from'
  }
};

var network = new vis.Network(container, data, options);