java - 将图标添加到(链接)元素/元素中的元素

Question

我需要创建一个呈现此 HTML 的元素，以便该图标成为 a 内部 HTML 的一部分:

<li>
    <a href="/pricing/de" id="de">
        <i class="fa fa-circle-o"></i>Deutschland
    </a>
</li>

我目前的方法如下

<li th:each="country : ${countryList}">
    <a th:href="@{country.getKey()}" th:text="${country.getValue()}">
        <i th:class="fa fa-square-o"></i>
    </a>
</li>

但这当然会用th:text覆盖图标。将图标添加到文本似乎也不起作用...

我如何在 thymeleaf 中做到这一点？

Answer 1

有很多方法可以解决这个问题。我可能会这样做:

<li th:each="country : ${countryList}">
    <a th:href="@{country.key}" >
        <i th:class="fa fa-square-o"></i><span th:text="${country.value}" />
    </a>
</li>

但是您可能不想要额外的跨度，因此您可以使用 th:block。

<li th:each="country : ${countryList}">
    <a th:href="@{country.key}">
        <i th:class="fa fa-square-o"></i><th:block th:text="${country.value}" />
    </a>
</li>

或者只是内联文本本身。

<li th:each="country : ${countryList}">
    <a th:href="@{country.key}" th:inline="text">
        <i th:class="fa fa-square-o"></i>[[${country.value}]]
    </a>
</li>

编辑:此外，如果您根据 JavaBeans 约定命名属性，则应该使用 .key 而不是 .getKey()