FontAwesome With JointJS

adding font icon inside of the svg element

by Roman Bruckner

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<html>

  <head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.7.1/joint.css" />
  </head>

  <body>
    <!-- content -->
    <div id="paper"></div>

    <!-- dependencies -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.0/backbone.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.7.1/joint.js"></script>

  </body>

</html>

JavaScript

const graph = new joint.dia.Graph();
const paper = new joint.dia.Paper({
  el: document.getElementById('paper'),
  width: 800,
  height: 600,
  model: graph,
  async: true
});

// Insert a text directly into the Paper

const vel = V('text', {
  'font-family': 'FontAwesome',
  'font-size': 15,
  'y': 60
});
//t.node.innerHTML = '&#xf056';
//t.node.textContent = '\uf056';
vel.text('Icon \uf2c4 In a paper');
paper.svg.appendChild(vel.node);

// Inside a shape

const shape = new joint.shapes.standard.Rectangle({
  size: {
    width: 100,
    height: 100
  },
  position: {
    x: 200
  },
  attrs: {
    label: {
      text: '\uf056',
      fontFamily: 'FontAwesome',
      fontSize: 50,
      fill: 'red',
    }
  }
});

shape.addPort({

        markup: [
            {
                tagName: 'circle',
                selector: 'portBackground'
            },
            {
                tagName: 'text',
                selector: 'portIcon',
                attributes: {
                    fill: '#333333'
                }
            }
        ],
    size: { width: 20, height: 20 },
    attrs: {
        portBackground: {
            r: 10,
            fill: 'white',
            stroke: 'black',
            strokeWidth: 2
        },
        portIcon: {
			      text: '\uf060',
			      fontFamily: 'FontAwesome',
            fontSize: 15,
            fill: 'black',
            textAnchor: 'middle',
            textVerticalAnchor: 'middle'
        }
    }
});

shape.addTo(graph);



const link = new joint.shapes.standard.Link({
  source: { x: 400, y: 50 },
  target: { x: 500, y: 50 },
  labels: [{ attrs: { text: { fill: 'green', text: '\uf056', fontFamily: 'FontAwesome' }}}]
});

link.addTo(graph);