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

要验证表单,我使用的是标准：

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

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

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

但它不起作用;明显

知道怎么做吗？

解决方法

{% 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 YourBundleToolBoxBundleFormExtension;

use SymfonyComponentFormAbstractTypeExtension;
use SymfonyComponentFormExtensionCoreTypeButtonType;
use SymfonyComponentFormFormInterface;
use SymfonyComponentFormFormView;
use SymfonyComponentOptionsResolverOptionsResolver;

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: YourBundleToolBoxBundleFormExtensionIconButtonExtension
    tags:
      - { name: 'form.type_extension',extended_type: 'SymfonyComponentFormExtensionCoreTypeButtonType' }

应用程序/资源/视图/表格/ fields.html.twig

{%- block button_widget -%}
    {%- if label is empty -%}
        {%- if label_format is not empty -%}
            {% set label = label_format|replace({
                '%name%': name,}) %}
        {%- 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 -%}

（编辑：济源站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!