Thymeleaf semantic-ui 擦除 header 中的图标

Question

无法找到解决此问题的方法...

我有一个 header（H1 标签），其值取决于一个变量。这个 header 里面也有一个图标。以下代码显示 header 文本，但图标消失了。我能理解为什么... th:text 正在替换标签中的所有内容。有没有办法保留图标并有动态header?

代码如下：

<h1 class="ui header" th:text="${'Widget ' +widget.id}"><i class=" ui grey cog icon"></i>Default Text</h1>

如果我删除 th:text="${'Widget ' +widget.id}" 部分，图标会恢复。

有什么想法吗？

谢谢，基思

Answer 1

th:text 属性将替换 <h1> 标签正文中的所有内容。

您可以将文本放在单独的 <span> 中：

<h1 class="ui header"><span th:text="${'Widget ' +widget.id}"></span><i class=" ui grey cog icon"></i>Default Text</h1>