如何在 Flask Wtform 的提交按钮中添加字体真棒图标？答案

【问题标题】：How to add a font awesome icon in the submit button in Flask Wtform?如何在 Flask Wtform 的提交按钮中添加字体真棒图标？
【发布时间】：2026-01-28 02:35:01
【问题描述】：

我到处看到这个问题，我都试过了。

我有一个使用 Python Flask 和 Wtform 制作的网络应用程序。

我只是想添加一个图标：

<i class='mdi mdi-arrow-right-bold-circle ml-2'></i>

在我的提交按钮中。

这是我的代码：

class NewCampaignForm(FlaskForm):
    
    name = StringField('Name of your campaign', validators=[DataRequired(), Length(min=2, max=100)],render_kw={"placeholder": "i.e. : Cold messaging to small businesses..."})
    submit = SubmitField('Next<i class="mdi mdi-arrow-right-bold-circle ml-2"></i>')

我试过标记：

from markupsafe import Markup
submit_value = Markup ('Next<i class="mdi mdi-arrow-right-bold-circle ml-2"></i>')
submit = SubmitField(submit_value)

没有用。它总是将 html 代码显示为标签，而不是将其呈现为 HTML 并显示图标。

我已经看到另一个来自 jinja2 的标记：

从 jinja2 导入标记

它也没有用:-(

你知道如何在我的提交按钮中显示这个图标吗？

【问题讨论】：

嘿，您找到解决方案了吗？我得到的结果与你得到的完全相同。

标签： python-3.x flask flask-wtforms

【解决方案1】：

即使使用标记，您也无法将 HTML 放入提交按钮，因为 WTForms 会将您传递的按钮值呈现为 value 属性：

<input id="submit" name="submit" type="submit" value="Next<i class="mdi mdi-arrow-right-bold-circle ml-2"></i>">

在您的情况下，您可以只为提交按钮编写纯 HTML，而不是在模板中使用 WTForms 的提交字段：

<form method="post">
{{ form.name() }}
<button type="submit">Next<i class="mdi mdi-arrow-right-bold-circle ml-2"></i></button>
</form>

【讨论】：