Add font awesome icon to each instance on a C3 Chart legend - font-awesome

Question

I would like to add a different Font Awesome icon to each instance on a C3 Chart legend.
So far it looks like I have to use the unicode and I have found how to do it for a D3 chart but am unsure how to transfer that info.
My code looks like this...
var eventChart = c3.generate({
bindto: '#eventChart',
data: {
columns: [
['A', -1, -1, -1, -1, -1, 0],
['B', 1, 0, 1, 0, 1, 1],
['C', -1, 0, -1, 0, -1, -1]
],
axes: {
A:'y2',
B: 'y2',
C: 'y2',
},
type: 'bar',
legend: {
position: 'right',
}
},
}
});
the D3 chart example was as follows
node.append('text')
.attr('font-family', 'FontAwesome')
.attr('font-size', function(d) { return d.size+'em'} )
.text(function(d) { return '\uf118' });
graph.json#
{"nodes":[{"name":"Myriel","group":1},{"name":"Napoleon","group":1},
{"name":"Mlle.Baptistine","group":1},
{"name":"Mme.Magloire","group":1}]}
Thank you

Answer 1

Here is the code I found that worked.
var eventChart = c3.generate({
bindto: '#eventChart',
data: {
columns: [
['A', -1, -1, -1, -1, -1, 0],
['B', 1, 0, 1, 0, 1, 1],
['C', -1, 0, -1, 0, -1, -1]
],
axes: {
A:'y2',
B: 'y2',
C: 'y2',
},
type: 'bar',
legend: {
show:false,
position: 'right',
}
},
}
});
d3.select('.container').insert('div','.eventChartlegend')
.attr('class', 'eventslegend').selectAll('span')
.data( ['A', 'B', 'C'])
.enter().append('span')
.attr('data-id', function (id) { return id; })
.html(function (id) { return id; })
.each(function (id) {
if(id === "A") {
d3.select(this).style('color',
eventChart.color(id)).attr('class',"fas fa-bug");
} else if(id === "B") {
d3.select(this).style('color',
eventChart.color(id)).attr('class',"fas fa-procedures");
} else if(id === "C") {
d3.select(this).style('color',
eventChart.color(id)).attr('class',"fas fa-cog");
} else {
d3.select(this).style('color', eventChart.color(id))
}
})
----legend.css -------
.eventslegend span{
width: 33.333333%;
cursor: pointer;
color: white;
}