Symfony-Twig：在 form_widget 中插入 fontawesome 图标

Question

为了验证我使用标准的表单：

{{ 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'}) }}

但它不起作用； 明显地

知道怎么做吗？

Answer 1

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

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

编辑

您还可以将ButtonType扩展为允许icon_before和icon_after ，以便在表单定义中轻松添加图标：

$form->add('submitReportV2Show', SubmitType::class, array(
    'label' => 'My test', 
    'icon_before' => 'fa-refresh', 
    'icon_after' => 'fa-refresh', 
    'attr' => array('class' => 'btn btn-sm btn-success'
)));

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

namespace YourBundle\ToolBoxBundle\Form\Extension;

use Symfony\Component\Form\AbstractTypeExtension;
use Symfony\Component\Form\Extension\Core\Type\ButtonType;
use Symfony\Component\Form\FormInterface;
use Symfony\Component\Form\FormView;
use Symfony\Component\OptionsResolver\OptionsResolver;

class IconButtonExtension extends AbstractTypeExtension
{
    public function getExtendedType()
    {
        return ButtonType::class;
    }

    public function buildView(FormView $view, FormInterface $form, array $options)
    {
        $view->vars['icon_before'] = $options['icon_before'] ?? '';
        $view->vars['icon_after'] = $options['icon_after'] ?? '';
    }

    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults([
            'icon_before' => null,
            'icon_after' => null
        ]);
    }
}

在服务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' }

应用程序/资源/视图/表格/ 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 -%}

Answer 2

sdespont的答案是正确的答案，值得被选中。 但是，我扩展了它的功能，包括添加自定义fa类图标以及图标是否位于按钮文本的左侧或右侧。

由于此功能接受变量，因此最好的办法是创建一个可重用的模板，而不是仅定制视图。

表单模板：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 %}

控制器：

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

树枝模板：

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

您可以设置任何旧的fa图标，甚至可以设置大小： fa-long-arrow-right fa-2x

Answer 3

在 YourFormType.class -> buildForm

        ->add('submit', SubmitType::class, [
            'attr' => [
                'class' => 'main-btn primary-btn',
            ],
            'label' => '<i class="fas fa-search"></i> Search',
            'label_html' => true,
        ])

Answer 4

最简单的，你可以把你的按钮与HTML和形式vars：

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

Answer 5

您只需为每个图标添加一个新的自定义服务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',
    ]
])