使用 thymeleaf 中的 th:text 属性后，Materializecss 图标从 html 中消失 [英] Materializecss icons are disappearing from html after using th:text attribute from thymeleaf

问题描述

我目前正在使用 Spring 学习 Web 应用程序开发，在此期间我遇到了烦人的问题.

I am currently learning web app development with Spring and during that I encountered with annoying problem.

让我们进入正题.我正在使用 materializecss，它允许通过以下方式制作带有图标的按钮:

So lets get to the point. I am using materializecss which allows to make a button with icon just by:

<button class="waves-effect waves-light btn" type="submit" name="save">Send
    <i class="material-icons left">send</i>
</button>

我得到了一个带有图标的漂亮按钮:链接

And i am getting a nice button with icon: link

但是一旦我添加了 thymeleaf 属性 th:text 它会导致图标消失.

But as soon as I add a thymeleaf attribute th:text it causes disappearing of the icon.

代码如下:

<button class="waves-effect waves-light btn" type="submit" name="save"
        th:text="#{submit}">Send
    <i class="material-icons right">send</i>
</button>

你知道是什么原因吗?

推荐答案

th:text 覆盖所有子标签.您必须将文本移动到它自己的标签.像这样，例如:

th:text overwrites all children tag. You have to move the text to it's own tag. Like this, for example:

<button class="waves-effect waves-light btn" type="submit" name="save">
    <span th:text="#{submit}" />
    <i class="material-icons right">send</i>
</button>

这篇关于使用 thymeleaf 中的 th:text 属性后，Materializecss 图标从 html 中消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！