title: How to add icons to D3 axis
body: <p>I am trying to add a locked or unlocked icon next to each tick on my axis. I want to use font awesome icons. It looks like it adds the HTML for the icons to the ticks, but the icons don't show up.</p>
  
  <pre><code> var bonus_penalties = [{"key": 5, "awarded": "y"}, {"key": -13, "awarded": "y"}, {"key": 25, "awarded": "y"},
                          {"key": 0, "awarded": "n"}, {"key": 5, "awarded": "n"}, {"key": 12, "awarded": "n"},
                          {"key": 34, "awarded": "n"}];
  
  var bpAxisScale = d3.scale.linear()
          .domain([0,6])
          .range([bottom- 45, 45]);
  
  var bpAxis = d3.svg.axis()
          .scale(bpAxisScale)
          .orient('right')
          .tickFormat(function(d) { return bonus_penalties[d]});
  
  bp_axis.selectAll("text")
      .style('fill',  function(d) {
      if(bonus_penalties[d].key == 0){
          return 'black';
      } else if(bonus_penalties[d].key &lt; 0){
          return 'red';
      } else {
          return 'green';
      }
  })
  .attr('font-size',"10px")
  .style("text-anchor", "middle");
  
  bp_axis.selectAll(".tick")
                      .html(["&lt;i class = 'fa fa-lock'&gt;&lt;/i&gt;"]);
  </code></pre>