How can I get a data label in my Highcharts Pie Chart that is a font-awesome icon?

Question

I'm trying to get a highchart's pie chart to work with font-awesome (or actually, we have ico-moon but I figure the technique would be the same so for the sake of this exercise, I'm going with font-awesome). I want the data labels (in my fiddle, the ones that say "icon") to actually be icons. I don't want to alter anything else as the piechart is so far perfect. Just add the icons.

Anybody have any suggestions to help? I have unicodes available to me and also tags.

Thanks in advance!

My Fiddle: http://jsfiddle.net/ewyss/z98ofd63/

    $(function () {
    var chart;


    $(document).ready(function () {

        Highcharts.setOptions({
            colors: ['#f1f1f1', '#A24130', '#A24130', '#A24130', '#A24130']
        });

        var chart;


        // Build the chart
        piechart = new Highcharts.Chart({
            chart: {
                renderTo: 'piecontainer',
                plotBackgroundColor: null,
                plotBorderWidth: 0
            },
            title: {
                text: null
            },
            credits: {
                enabled: false
            },
            tooltip: {
                pointFormat: false
            },
            plotOptions: {
                pie: {
                    startAngle: -270,
                    allowPointSelect: false,
                    dataLabels: {
                        softConnector: false,
                        //if data.point.name == empty string return enabled: false, else return enabled: true... This will be the slice called slice
                        enabled: true,
                        connectorWidth: 1,
                        distance: 15,
                        style: {
                            fontFamily: 'roboto',
                            fontSize: '8pt',
                            width: 80
                        }
                    },
                    showInLegend: false
                }
            },
            series: [{
                type: 'pie',
                name: 'PPM Resource Waste',
                data: [
                    ['Blank', 60],
                    ['Icon 1%', 5],
                    ['Icon 15%', 15],
                    ['Icon 1%', 5],
                    ['Icon 5%', 5]
                ],
                animation: false
            }]
        });
    });
});

Answer 1

You can add the icons inside the labels of your dataset. Something like <i class='fa fa-times'></i>. By default any HTML is stripped from your labels, but you can enable it by setting dataLabels.useHTML to true.

In short, you would have to change this:

        series: [{
            type: 'pie',
            name: 'PPM Resource Waste',
            data: [
                ['Blank', 60],
                ['Icon 1%', 5],
                ['Icon 15%', 15],
                ['Icon 1%', 5],
                ['Icon 5%', 5]
            ],
            animation: false
        }]

to something similar to this:

             series: [{
                type: 'pie',
                name: 'PPM Resource Waste',
                data: [
                    ['<i class="fa fa-dollar fa-2x"></i> Blank', 60],
                    ['<i class="fa fa-save"></i> Icon 1%', 5],
                    ['<i class="fa fa-cutlery"></i> Icon 15%', 15],
                    ['<i class="fa fa-ban"></i> Icon 1%', 5],
                    ['<i class="fa fa-spinner fa-spin"></i> Icon 5% ', 5],
                ],
                dataLabels: {
                    useHTML: true
                },
                animation: false
            }]

as you can see in your updated fiddle: http://jsfiddle.net/z98ofd63/1/