JSFiddle - React, Tailwind, and code Playground

by Vignesh Gopalakrishnan

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<canvas id='abc'></canvas>

JavaScript

var setCursor = function (icon) {
    var tempElement = document.createElement("i");
    tempElement.className = icon;
    document.body.appendChild(tempElement);
    var character = window.getComputedStyle(
        document.querySelector('.' + icon), ':before'
    ).getPropertyValue('content');
    tempElement.remove();

    var canvas = document.getElementById("abc");
    canvas.width = 24;
    canvas.height = 24;
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "#000000";
    ctx.font = "24px FontAwesome";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText(character, 12, 12);
    var dataURL = canvas.toDataURL('image/png')
    $('body').css('cursor', 'url('+dataURL+'), auto');
}

setCursor('fa-free-code-camp');