Forms Symfony Twig：在form_小部件中插入fontawesome图标

要验证我正在使用的表单，请执行以下操作：

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

我想在按钮中插入一个fontawsome图标。我试过：

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

{form_小部件（form.save，{'attr'：{'class'：'btn btn sm btn danger'}，'label'：'Submit form'}}

但它不起作用；显然

---

你知道怎么做吗？

我会在同一个视图中定义一个新的表单模板（如果需要重用代码，也可以在模板中定义）。更多细节

创建一个新类src/bundle/Form/Extension：

在服务src/bundle/Resources/config/service.yml中声明它

bundle.tools.form.type_extension.icon_button:
    class: YourBundle\ToolBoxBundle\Form\Extension\IconButtonExtension
    tags:
      - { name: 'form.type_extension', extended_type: 'Symfony\Component\Form\Extension\Core\Type\ButtonType' }

app/Resources/views/Form/fields.html.twig

{%- block button_widget -%}
    {%- if label is empty -%}
        {%- if label_format is not empty -%}
            {% set label = label_format|replace({
                '%name%': name,
                '%id%': id,
            }) %}
        {%- elseif label is same as(false) -%}
            {% set translation_domain = false %}
        {%- else -%}
            {% set label = name|humanize %}
        {%- endif -%}
    {%- endif -%}

    <button type="{{ type|default('button') }}" {{ block('button_attributes') }}>
        {% if icon_before is defined and icon_before is not null %}
            <i class="fa {{ icon_before }}"></i>
        {% endif %}
        {{ translation_domain is same as(false) ? label : label|trans({}, translation_domain) }}
        {% if icon_after is defined and icon_after is not null %}
            <i class="fa {{ icon_after }}"></i>
        {% endif %}
    </button>
{%- endblock button_widget -%}

{# 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 %}

{%-block button\u widget-%}
{%-如果标签为空-%}
{%-如果标签_格式不是空-%}
{%set label=label|U格式|替换({
“%name%”：名称，
“%id%”：id，
}) %}
{%-elseif标签与（false）-%}
{%set translation\u domain=false%}
{%-else-%}
{%set label=name |人性化%}
{%-endif-%}
{%-endif-%}
{%icon_before已定义且icon_before不为null%}
{%endif%}
{{translation_domain与（false）相同）？label:label{trans（{}，translation_domain）}
{%如果定义了icon_after且icon_after不为空%}
{%endif%}
{%-endblock按钮\小部件-%}

s响应者的答案是正确的，值得选择。然而，我已经扩展了它的功能，包括添加自定义fa类图标，以及图标是否放置在按钮文本的左侧或右侧

由于此功能接受变量，因此最好创建一个要重用的模板，而不是仅自定义视图

表单模板：app/Resources/views/Form/submit.html.twig

{%- block button_widget -%}
    {%- if label is empty -%}
        {%- if label_format is not empty -%}
            {% set label = label_format|replace({
                '%name%': name,
                '%id%': id,
            }) %}
        {%- elseif label is same as(false) -%}
            {% set translation_domain = false %}
        {%- else -%}
            {% set label = name|humanize %}
        {%- endif -%}
    {%- endif -%}

    <button type="{{ type|default('button') }}" {{ block('button_attributes') }}>
        {% if icon_before is defined and icon_before is not null %}
            <i class="fa {{ icon_before }}"></i>
        {% endif %}
        {{ translation_domain is same as(false) ? label : label|trans({}, translation_domain) }}
        {% if icon_after is defined and icon_after is not null %}
            <i class="fa {{ icon_after }}"></i>
        {% endif %}
    </button>
{%- endblock button_widget -%}

{# 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 %}

细枝模板：

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

---

您可以设置任何旧的fa图标，甚至按如下方式调整大小：

fa长箭头右fa-2x

最简单的方法是，您可以使用html和表单变量设置按钮：

<button type="submit" name="{{ form.send.vars.full_name }}" id="{{ form.send.vars.id }}" class="btn btn-sm btn-danger"><i class="fa fa-envelope-o"></i></button><

<

您只需为每个图标添加一个新的自定义服务css类即可

/* 
 * css selector for a class attribute that starts with "btn-fa-" or has " btn-fa-" in it:
 */
[class^="btn-fa-"]:before,
[class*=" btn-fa-"]:before
{
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    margin: 0 6px 0 2px;
}

/*
 * And then only 1 setting per font awesome class
 */
.btn-fa-plus:before {
    content: '\f067';
}

并将该类添加到ButtonType

->add('Add an item', ButtonType::class, [
    'attr' => [
        'class' => 'btn btn-primary btn-fa-plus',
    ]
])

---

@Raphael_b任何反馈都会很感激你的帖子很棒；我还需要努力一点才能完全掌握它。谢谢；对不起，我迟了回答，我出去了一天。

/* 
 * css selector for a class attribute that starts with "btn-fa-" or has " btn-fa-" in it:
 */
[class^="btn-fa-"]:before,
[class*=" btn-fa-"]:before
{
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    margin: 0 6px 0 2px;
}

/*
 * And then only 1 setting per font awesome class
 */
.btn-fa-plus:before {
    content: '\f067';
}

->add('Add an item', ButtonType::class, [
    'attr' => [
        'class' => 'btn btn-primary btn-fa-plus',
    ]
])