thymeleaf: Text und Symbole in der gleichen TD

Question

I & Icons in der gleichen Zelle einer Tabelle Text setzen will, wie diese, aber es scheint, dass es nicht, weil funktioniert nur der Text

<td class="col_name" th:text="${mareSuperiora.linkQuality}" >GOOD 
    <span th:if="${mareSuperiora.linkQuality == 'EXCELLENT'}" >              
    <i class="fa fa-signal fa-2x" style="color:#009933; text-align: center;" aria-hidden="true"></i>           
    </span> 
    <span th:if="${mareSuperiora.linkQuality == 'GOOD'}" >              
    <i class="fa fa-signal fa-2x" style="color:#0066cc; text-align: center;" aria-hidden="true"></i>           
    </span> 
    <span th:if="${mareSuperiora.linkQuality == 'AVERAGE'}" >              
    <i class="fa fa-signal fa-2x" style="color:#ff9900; text-align: center;" aria-hidden="true"></i>           
    </span> 
    <span th:if="${mareSuperiora.linkQuality == 'LIMIT'}" >              
    <i class="fa fa-signal fa-2x" style="color:#ff5050; text-align: center;" aria-hidden="true"></i>           
    </span> 
</td><!-- NAME --> 

Answer 1

erscheint Die th:text ersetzt alle untergeordneten Knoten, in diesem Fall auch das Markup für die Symbole. Die Lösung ist ein spezielles span für den Textteil hinzuzufügen:

<td class="col_name"> 
    <span th:text="${mareSuperiora.linkQuality}">GOOD</span> 
    <span th:if="${mareSuperiora.linkQuality == 'EXCELLENT'}" >              
    <i class="fa fa-signal fa-2x" style="color:#009933; text-align: center;" aria-hidden="true"></i>           
    </span> 
    <span th:if="${mareSuperiora.linkQuality == 'GOOD'}" >              
    <i class="fa fa-signal fa-2x" style="color:#0066cc; text-align: center;" aria-hidden="true"></i>           
    </span> 
    <!-- and so on --> 
</td>