如何使用Thymeleaf替换HTML文本？附代码示例与期望效果

这个问题很典型，我来帮你捋清楚问题出在哪以及怎么解决～

你的核心问题是**th:text会完全替换它所在标签的内部内容**：你把th:text="${menuItem.name}"加到了<i>标签上，而Font Awesome图标是靠fa fa-home这个CSS类渲染的，不需要标签内有文本内容。一旦给<i>标签加了th:text，Thymeleaf就会把这个标签里的空内容替换成menuItem.name的值，自然图标就被文字覆盖了。

这里给你几种可行的解决方案：

方案1：使用Thymeleaf内联表达式（最简洁） #

直接在<i>标签后面用[[${menuItem.name}]]输出文本，这是Thymeleaf的内联文本语法，完全不会影响图标标签的渲染：

<a>
  <i class="fa fa-home"></i> [[${menuItem.name}]]
  <span class="fa fa-chevron-down"></span>
</a>

方案2：用单独的容器承载文本（适合需要加样式的场景） #

如果后续需要给菜单文本单独加CSS样式，可以把文本放在一个独立的<span>标签里，给这个标签绑定th:text：

<a>
  <i class="fa fa-home"></i>
  <span th:text="${menuItem.name}"></span>
  <span class="fa fa-chevron-down"></span>
</a>

方案3：开启父标签的文本内联模式 #

在<a>标签上添加th:inline="text"，然后用内联表达式输出文本，效果和方案1一致：

<a th:inline="text">
  <i class="fa fa-home"></i> [[${menuItem.name}]]
  <span class="fa fa-chevron-down"></span>
</a>

这几种写法都能实现你想要的效果：图标完整保留，文本出现在图标和下拉箭头之间。

内容的提问来源于stack exchange，提问作者BeerBubble