How can I use a FontAwesome icon in a Cytoscape node label?

Question

The icon is drawn as a square in the node. It should be drawn as the FontAwesome user icon.

I have tried other free icons as well, but none of them work.

If I go back to FontAwesome 4, the user icon will work, but I will need an icon only available in version 6.

The changes to make FA 4 work are to use a font-family: FontAwesome and <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

What do I need to change so I can use the Font Awesome 6 icon in a Cytoscape node label?

const cy = cytoscape({
  container: document.getElementById("chart"), // container to render in

  elements: [
    {
      data: { id: "a" }
    }
  ],

  style: [
    // the stylesheet for the graph
    {
      selector: "node",
      style: {
        "background-color": "#666",
        label: "\uf007",
        "text-valign": "center",
        "text-halign": "center",
        shape: "rectangle",
        "font-family": "Font Awesome 6 Pro",
      }
    }
  ],

  layout: {
    name: "grid",
    rows: 1
  }
});

.fa-test {
  font-family: "Font Awesome 6 Free";
  color: red;
}

.chart {
  color: red;
  width: 1000px;
  height: 400px;
  background-color: lightgrey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.28.1/cytoscape.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">

<div class="fa-test">
  &#xf007
</div>

<div class="chart" id="chart">
</div>