0

I have an html table (generated by a third party application), which has a column, with a status field, like so :

<table cellspacing="5" class="confirmationtable">
<tbody><tr><td class="conf_subheader">Descripción</td>
<td class="conf_subheadercenter">Total</td><td> </td>
</tr>
<tr>
<td >Impuesto de estancia <small>5 adultos (12 kn) <br>20-02 — 22-02-2021</small></td>
<td class="conf_number">16,00&nbsp;€</td>
<td  class="conf_status">zg</td>
</tr>
<tr>
<td >Alojamiento Noble Suite 20/02 — 22/02/2021</td>
<td class="conf_number">65,00&nbsp;€</td>
<td class="conf_status">lo</td>
</tr>
</tbody></table>

I would now like to use the content of the .conf_status columns (zg, lo), to be replace by an icon .... I already have the following classes defined in css:

.icon::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  font-size:initial;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  color:maroon;
}


.lo::before{content:'\f7b6'} 
.zg::before{content:'\f7f6'}

What's the best way to achieve this?

Dirk Albrecht
  • 61
  • 4
  • Either use javascript, that triggers on page-load or put the class directly into the class-parameter. – Pingger Shikkoken Feb 12 '21 at 13:40
  • best you can do with css only is to create your own font icon that would replace those words with your icon like material.io or font awesome do (but don't ask me how you do that!) – Pete Feb 12 '21 at 14:34
  • I cannot use javascript; The only thing I can do is to inject some css code.... – Dirk Albrecht Feb 12 '21 at 15:43

0 Answers0