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

我会在同一视图中定义一个新的表单模板（如果需要重用代码，则在模板中定义）。更多详情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 %}

修改

您还可以将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();

Twig模板：

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

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

Answer 3

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

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

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

4 个答案: