Symfony-Twig: inserire fontawesome un'icona in una form_widget

Question

Per convalidare una forma che sto usando uno standard:

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

voglio inserire un'icona fontawsome nel pulsante. Ho provato:

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

Ma non funziona; ovviamente

Qualche idea su come?

Answer 1

Definirei un nuovo modello di modulo nella stessa vista (o in un modello se è necessario riutilizzare il codice). Maggiori dettagli 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

Inoltre, potrebbe essere interessante per personalizzare (accettare HTML grezzo in etichetta) solo pulsante l'etichetta presentare per ID. Ulteriori dettagli capitolo Come personalizzare un singolo campo del collegamento sopra.

Sostituire product_name dal vostro ID di invio e la sintassi {{ 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

risposta di sdespont è la risposta corretta e degna di essere selezionato. Tuttavia, ho esteso la sua funzionalità per includere l'aggiunta dell'icona di classe fa personalizzata e se l'icona è posizionata a sinistra oa destra del testo del pulsante.

Poiché questa funzionalità accetta variabili, la cosa migliore da fare è creare un modello da riutilizzare invece di personalizzare solo la vista.

modello di modulo: 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 %} 

Controller:

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

Twig modello:

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

È possibile impostare qualsiasi vecchia icona fa e anche dimensionamento in questo modo: fa-long-arrow-right fa-2x