FontAwesome 6.5 With JointJS

adding font icon inside of the svg element

by Roman Bruckner

HTML

<html>

  <head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
  </head>

  <body>
    <!-- content -->
    <div id="paper" style="margin: 20px;"></div>

    <!-- dependencies -->
    <script src="https://cdn.jsdelivr.net/npm/@joint/[email protected]/dist/joint.min.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 \uf6be 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: 'in \uf6be',
      fontFamily: 'sans-serif',
      fontSize: 15,
      annotations: [{
        start: 5,
        end: 6,
        attrs: {
           fontFamily: 'FontAwesome',
           fontSize: 30,        
           fill: 'red',
        }
      }],
      fill: 'black'
    }
  }
});

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: '\uf6be',
			      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: '\uf6be', fontFamily: 'FontAwesome' }}}]
});

link.addTo(graph);