Update icon returned by CSS

Question

In the application I am working on, we can add the following markup for the pictured result

      <span class="cell-inner-undefined">
        <span title='Not defined' class="status pl-undefined" ></span>
      </span>

Inside the relevant CSS we have the following:

.pl-undefined:before {
    content: "";
    color:#969696;
}

The item assigned to content looks like unicode. Instead of that I want to get the result of the following:

<span class="fa-stack fa-5x">
      <i class="fa fa-info-circle fa-stack-1x" style="color:blue" ></i>
      <i class="fa fa-ban fa-stack-1x" style="color:red"></i>
</span>

How can I get the class 'pl-undefined' to return the FA icon generated above?

p.s: Adding the fa span in my page displays the desired icon, but I need it to be displayed using the class.

Answer 1

I didn't find any other way of achieving this, other than adding a javascript which will find a <span class="cell-inner-undefined"> and replace it with the fa CSS