Highcharts Icon Markers

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div id="container"></div>

CSS

#container {
    min-width: 300px;
    max-width: 600px;
    height: 400px;
    margin: 1em auto;
}

JavaScript

/*
This experiment explores how to use FontAwesome iconic fonts as markers in Highcharts. Three steps are required:

1. Supply the plugin code below to handle text symbols.
2. In each series' marker.symbol setting, add the font icon as Unicode string on the format 
   "text:\uf182". The Unicode corresponding to icons can be found at 
   https://github.com/FortAwesome/Font-Awesome/blob/master/less/variables.less

Compatibility notes:
- IE6, 7, and 8 don't support rgba colors (fall back to solid rgb)
*/

/* Highcharts plugin to handle text symbols */
(function (H) {
    function symbolWrap(proceed, symbol, x, y, w, h, options) {
        if (symbol.indexOf('text:') === 0) {
            var text = symbol.split(':')[1],
                svgElem = this.text(text, x, y)
            .attr({
            	translateY: h,
                translateX: -1
            })
                .css({
                    fontFamily: 'FontAwesome',
                    fontSize: h * 2
                });
            
            if (svgElem.renderer.isVML) {
                svgElem.fillSetter = function (value, key, element) {
                    element.style.color = H.Color(value).get('rgb');
                };
            }
            return svgElem;
        }
        return proceed.apply(this, [].slice.call(arguments, 1));
    }
    H.wrap(H.SVGRenderer.prototype, 'symbol', symbolWrap);
    if (H.VMLRenderer) {
        H.wrap(H.VMLRenderer.prototype, 'symbol', symbolWrap);
    }
    
    // Load the font for SVG files also
    H.wrap(H.Chart.prototype, 'getSVG', function (proceed) {
        var svg = proceed.call(this);
        svg = '<?xml-stylesheet type="text/css" ' +
            'href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" ?>' + 
            svg;
        return svg;
    });
}(Highcharts));


$('#container').highcharts({
    
    chart: {
        type: 'scatter'
    },
    
    title: {
        text: 'Icon markers in Highcharts'
    },
   ...