将WTForms提交按钮设置为图标 [英] Set WTForms submit button to icon

问题描述

我想要一个显示图标而不是文本的提交按钮.该按钮是WTForms表单中的一个字段.我将Bootstrap和Open Iconic用于样式和图标.如何设置提交字段以显示图标?

I want a submit button that displays an icon rather than text. The button is a field in a WTForms form. I am using Bootstrap and Open Iconic for styling and icons. How do I set the submit field to display an icon?

class MyForm(Form):
    submit = SubmitField('')

{{ form.submit }}

这篇文章指的是icon方法，但是我找不到关于它的更多信息.

This post refers to an icon method, but I can't find any more information on it.

推荐答案

您链接的示例使用的是Flask-Bootstrap提供的宏.宏使使用Bootstrap构造表单变得容易，但可能并不灵活.例如，他们可能不支持改为使用打开图标"图标.

The example you linked is using macros provided by Flask-Bootstrap. The macros make it easy to construct forms with Bootstrap, but might not be flexible. For example, they probably don't support using Open Iconic icons instead.

通常，您无需在表单中指定提交"按钮，因为它不会提供有用的数据.手动在模板中将提交作为按钮呈现，并设置所需的任何内容.

Typically, you don't need to specify the submit button in the form, as it doesn't contribute useful data. Render the submit as a button in the template manually and set whatever content you need.

<button type=submit class="btn btn-primary"><span class="oi oi-check" title="Submit"></span></button>

如果您的表单中确实需要SubmitField，则可以使用HTML将标签设置为Markup字符串.需要Markup告诉Jinja无需转义即可安全地进行渲染.

If you do need a SubmitField in your form, you can set the label to a Markup string with the HTML. The Markup is needed to tell Jinja it's safe to render without escaping.

from markupsafe import Markup
submit_value = Markup('<span class="oi oi-check" title="Submit"></span>')
submit = SubmitField(submit_value)

这篇关于将WTForms提交按钮设置为图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！