Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to add icon to submit button? #209

Open
PanderMusubi opened this issue Feb 9, 2022 · 3 comments
Open

How to add icon to submit button? #209

PanderMusubi opened this issue Feb 9, 2022 · 3 comments
Labels

Comments

@PanderMusubi
Copy link
Collaborator

I have a form with

submit = SubmitField('Search')

and a template with

{{ render_field(form.submit) }}

which renders to

<input class="btn btn-primary btn-lg btn-block" id="submit" name="submit" type="submit" value="Search">

but I want the search icon on the submit button instead of the text Search. Anybody know how to do this? Thanks.

@PanderMusubi
Copy link
Collaborator Author

PanderMusubi commented Feb 9, 2022

This works, but I hope it can be done in a shorter way

<button class="btn btn-primary btn-lg btn-block" id="submit" name="submit" type="submit" value="Search">{{ render_icon('search') }}</button>

@greyli greyli changed the title Question how to get icon on submit button How to add icon to submit button? Feb 27, 2022
@PanderMusubi
Copy link
Collaborator Author

If there is no alternative way or supporting this in our implementation, okay I add this to our documentation?

@Technetium1
Copy link

@PanderMusubi It is documented here: https://bootstrap-flask.readthedocs.io/en/stable/macros/#render-icon

Please add support for overriding fill color to it:

{% macro render_icon(name, size=config.BOOTSTRAP_ICON_SIZE, color=config.BOOTSTRAP_ICON_COLOR, title=None, desc=None) %}
{% set bootstrap_colors = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark', 'muted'] %}
<svg class="bi{% if not color %}"{% elif color in bootstrap_colors %} text-{{ color }}"{% else %}" style="color: {{ color }}"{% endif %}
width="{{ size }}" height="{{ size }}" fill="currentColor">
{% if title is not none %}<title>{{ title }}</title>{% endif %}
{% if desc is not none %}<desc>{{ desc }}</desc>{% endif %}
<use xlink:href="{{ url_for('bootstrap.static', filename='icons/bootstrap-icons.svg') }}#{{ name }}"/>
</svg>
{% endmacro %}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants