How to display Fontawesome icons using Unicode and React?

Question

I'm experimenting with React and want to display a list of Fontawesome icons.

I have a JSON file that has the data set about as such:

{
  "icons": [
    {
      "name": "Glass",
      "id": "glass",
      "unicode": "f000",
      "created": 1,
      "filter": [
        "martini",
        "drink",
        "bar",
        "alcohol",
        "liquor"
      ],
      "categories": [
        "Web Application Icons"
      ]
    },
    etc

I can iterate through this and return and print each point of data, but can't figure out how to display the actual icons.

I have tried using unicode as such:

  return(
    <div>
      <ul>
        <li>
          <span>{data.name}</span>
          <i className="fa">{data.unicode}</i>
        </li>
      </ul>
    </div>
  )

But it just prints the unicode value.

Would anyone know if it's possible to render the icon this way?

Answer 1

Convert the number to a string first, by calling String.fromCharCode .