Set WTForms submit button to icon

Question

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 }}

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

Answer 1

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>

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)