问题描述
我想要一个显示图标而不是文本的提交按钮.该按钮是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提交按钮设置为图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！