title: How to display icon instead of data in Primefaces datatable?
body: <p>I have a <a href="https://www.primefaces.org/showcase/ui/data/datatable/basic.xhtml" rel="nofollow noreferrer">Primefaces Datatable</a> containing some dataset which values are <strong>0</strong> or <strong>1</strong> in one of the columns - such values are used to calculate a <a href="https://www.primefaces.org/showcase/ui/data/datatable/summaryRow.xhtml" rel="nofollow noreferrer">summary row</a>.</p>
  
  <p>What I want to do is:</p>
  
  <ul>
  <li>when the value is <strong>1</strong>, a <a href="https://www.primefaces.org/showcase/ui/misc/fa.xhtml" rel="nofollow noreferrer">Font Awesome <em>car</em> icon</a> should be displayed and the number <strong>1</strong> gets hidden; </li>
  <li>the same for value <strong>0</strong>, but displaying an <a href="https://www.primefaces.org/showcase/ui/misc/fa.xhtml" rel="nofollow noreferrer">airplane icon</a>.</li>
  </ul>
  
  <p>So far, what I achieved was using a <em>conditional css</em>:</p>
  
  <pre><code>&lt;p:dataTable id="datalist"
               filteredValue="#taxiTripsController.filteredTaxiTrips}"
               value="#{taxiTripsController.items}"
               var="item"
               rowKey="#{item.id}"
               paginator="true"
               selectionMode="single"
               selection="#{taxiTripsController.selected}"
               widgetVar="txcwv" &gt;
  
  &lt;!--some columns ommited --&gt;
  
  &lt;p:column sortBy="#{item.cr1}" filterBy="#{item.cr1}" &gt;
      &lt;f:facet name="header"&gt;
          &lt;h:outputText value="cr1"/&gt;
      &lt;/f:facet&gt;
      &lt;h:outputText id="cr1" value="#{item.cr1}" styleClass="#{item.cr1 == 1 ? 'realizado' : null}" title="cr1" /&gt;
  &lt;/p:column&gt;
  
  &lt;/p:dataTable&gt;
  </code></pre>
  
  <p>The css excerpt:</p>
  
  <pre><code>.realizado {
  font: bold 2em/1.35 Arial;
  text-shadow: 4px 4px 10px red;
  icon:url("car.png"); &lt;!-- or some way to use fa fa-car
  }
  </code></pre>
  
  <p>But no icon or image is displayed, just the text shadow:</p>
  
  <p><a href="https://i.stack.imgur.com/T1cUS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/T1cUS.png" alt="minimalist Datatable showing text shadow in cr1 column"></a></p>
  
  <p>Does anyone knows how can I do it ?
  Thanks in advance.</p>