Symfony-Gałązka: insert fontawesome ikonę w form_widget

Question

Aby sprawdzić formę Używam standard:

{{ form_widget(form.save, {'attr': {'class': 'btn btn-sm btn-danger'}, 'label': 'Submit form'}) }} 

chcę wstawić ikonę fontawsome w przycisku. Próbowałem:

{{ form_widget(form.save, {'attr': {'class': 'btn btn-sm btn-danger'}, 'label': '<i class="fa fa-envelope-o"></i> Submit form'}) }} 

Ale to nie działa; oczywiście

Każdy pomysł jak to zrobić?

Answer 1

Chciałbym zdefiniować nowy szablon formularza w tym samym widoku (lub w szablonie, jeśli trzeba ponownie użyć kodu). Więcej szczegółów here

{% extends '::base.html.twig' %} 

{% form_theme form _self %} 

{%- block submit_widget -%} 
    {%- set type = type|default('submit') -%} 

    {%- if label is empty -%} 
     {%- if label_format is not empty -%} 
      {% set label = label_format|replace({ 
       '%name%': name, 
       '%id%': id, 
      }) %} 
     {%- else -%} 
      {% set label = name|humanize %} 
     {%- endif -%} 
    {%- endif -%} 
    <button type="{{ type|default('button') }}" {{ block('button_attributes') }}> 
     <i class="fa fa-envelope-o"></i> 
     {{ label|trans({}, translation_domain) }} 
    </button> 
{%- endblock submit_widget -%} 


{% block content %} 
    {# ... render the form #} 

    {{ form_row(form.age) }} 
{% endblock %} 

EDIT

Również może to być interesujące, aby dostosować (zaakceptować HTML surowy w etykiecie) tylko etykieta złożyć przycisk przez ID. Więcej szczegółów rozdział Dostosowywanie pojedynczego pola powyższego linku.

Wymień product_name przez złożyć ID i składni {{ form_widget(form.save, {'attr': {'class': 'btn btn-sm btn-danger'}, 'label': '<i class="fa fa-envelope-o"></i> Submit form'}) }}

{% block _product_name_label %} 
    <label>{{ label|raw }}</label> 
{% endblock %} 

Answer 2

sdespont za odpowiedź jest poprawna odpowiedź i godne są wybrane. Rozszerzyłem jednak jego funkcjonalność, dodając niestandardową ikonę klasy fa, a także ikonę umieszczoną po lewej lub prawej stronie tekstu przycisku.

Ponieważ ta funkcja akceptuje zmienne, najlepszą rzeczą do zrobienia jest utworzenie szablonu do ponownego użycia zamiast dostosowywania samego widoku.

Formularz szablon: app/Resources/views/form/submit.html.twig

{# app/Resources/views/form/submit.html.twig #} 

{% block submit_widget %} 
{% set type = type|default('submit') %} 

{% if label is empty %} 
    {% if label_format is not empty %} 
     {% set label = label_format|replace({ 
       '%name%' : name, 
       '%id%' : id, 
      }) %} 
    {% else %} 
     {% set label = name|humanize %} 
    {% endif %} 
{% endif %} 
<button type="{{ type|default('button') }}" {{ block('button_attributes') }}> 
    {% if fa is defined %} 
     {% if left is defined and left %} 
      <i class="fa {{ fa }}"></i> 
     {% endif %} 
     {{ translation_domain is same as(false) ? label : label|trans({}, translation_domain) }} 
     {% if right is defined and right %} 
      <i class="fa {{ fa }}"></i> 
     {% endif %} 
    {% else %} 
     {{ translation_domain is same as(false) ? label : label|trans({}, translation_domain) }} 
    {% endif %} 
</button> 
{% endblock submit_widget %} 

Kontroler:

$form = $this->createFormBuilder($user) 
      ... 
      ->add('submit', SubmitType::class, array(
       'attr'=> array('class'=>'myclass') 
      )) 
      ->getForm(); 

Gałązka szablon:

{{ form_widget(form.submit, {'fa' : 'fa-long-arrow-right','right' : true}) }} 

Można ustawić dowolny stara ikona i nawet rozmiar: fa-long-arrow-right fa-2x