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

您可以为每个图标添加一个新的自定义服务 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 2

最简单的，你可以把你的按钮用html和form 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 3

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

在service 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 -%}

Answer 4

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