Put favicon in middle of Highchart

I tried to find on different websites the solution to my problem but couldn't find one.

I am using highcharts to display a beautiful chart (cf picture below).

I would like to add to this chart an icon (Font awesome web application icon) at the middle of the circle.

I found an example (cf picture below) where some text is added at the center of it.

The code to display this chart is as follow:

/* Renders a pie chart using the provided chartops */
var renderPieChart = function (chartopts) {
    return Highcharts.chart(chartopts['elemId'], {
        chart: {
            type: 'pie',
            events: {
                load: function () {
                    var chart = this,                                                                     
                        rend = chart.renderer,                                                            
                        pie = chart.series[0],                                                            
                        left = chart.plotLeft + pie.center[0],                                            
                        top = chart.plotTop + pie.center[1];                                              
                    this.innerText = rend.text(chartopts['data'][0].y, left, top).                        
                    attr({                                                                                
                        'text-anchor': 'middle',                                                          
                        'font-size': '24px',                                                              
                        'font-weight': 'bold',                                                            
                        'fill': chartopts['colors'][0],                                                   
                        'font-family': 'Helvetica,Arial,sans-serif'                                       
                    }).add();                                                                             
                },                                                                                        
                render: function () {                                                                     
                    this.innerText.attr({                                                                 
                        text: chartopts['data'][0].y                                                      
                    })                                                                                    
                }                                                                                         
            }                                                                                             
        },                                                                                                
        title: {                                                                                          
            text: chartopts['title']                                                                      
        },                                                                                                
        plotOptions: {                                                                                    
            pie: {                                                                                        
                innerSize: '80%',                                                                         
                dataLabels: {                                                                             
                    enabled: false                                                                        
                }                                                                                         
            }                                                                                             
        },                                                                                                
        credits: {                                                                                        
            enabled: false                                                                                
        },                                                                                                
        tooltip: {                                                                                        
            formatter: function () {                                                                      
                if (this.key == undefined) {                                                              
                    return false                                                                          
                }                                                                                         
                return '<span style="color:' + this.color + '">\u25CF</span>' + this.point.name + ': <b>' + this.y + '</b><br/>'   
            }
        },  
        series: [{                                                                                        
            data: chartopts['data'],                                                                      
            colors: chartopts['colors'],                                                                  
        }]
    })
}

What do I have to change in this code so I'm able to add an icon?

Thanks,

Cycl0pe

Solution

All you have to do is to import the CSS and use SVGRenderer.text (useHTML enabled):

  load: function() {
    this.renderer.text("<i style='font-size:24px' class='fa'>&#xf2b9;</i>", 290, 220, true).add();
  }

Live demo: http://jsfiddle.net/BlackLabel/mpL2chhe/