php – 如何在symfony表单中选择显示字体真棒图标

首先,要说使用< i class =“fa fa-heart”>< / i>因为标签不是一个选择,因为<选项> element不能包含任何子元素,只能包含文本. (see related issue)

为了可重用性,让我们构建一个名为“IconChoiceType”的表单类型作为“ChoiceType”的子类：

namespace AppBundleFormType;

use SymfonyComponentFormAbstractType;
use SymfonyComponentFormExtensionCoreTypeChoiceType;
use SymfonyComponentFormFormInterface;
use SymfonyComponentFormFormView;
use SymfonyComponentOptionsResolverOptionsResolver;

class IconChoiceType extends AbstractType
{
    /**
     * Cache for multiple icon fields or sub-requests.
     * 
     * @var array
     */
    private $choices;

    private $kernelRootDir;

    public function __construct($kernelRootDir)
    {
        $this->kernelRootDir = $kernelRootDir;
    }

    public function buildView(FormView $view,FormInterface $form,array $options)
    {
        // Pass this flag is necessary to render the label as raw. 
        // See below the twig field template for more details.
        $view->vars['raw_label'] = true;
    }

    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults([
            'attr' => [
                // It's the key of the solution and can be done in many ways.
                // Now,the rendered <select> element will have a new font.
                'style' => "font-family: 'FontAwesome';"
            ],'choices' => $this->getFontAwesomeIconChoices(),]);
    }

    public function getParent()
    {
        return ChoiceType::class;
    }

    protected function getFontAwesomeIconChoices()
    {
        if (null !== $this->choices) {
            // don't to load again for optimal performance.
            // useful for multi-icon fields and sub-requests.
            return $this->choices;
        }

        // BTW we could configure the path to the "font-awesome.css".
        $fontAwesome = file_get_contents($this->kernelRootDir.'/../web/assets/vendor/font-awesome/css/font-awesome.css');

        // this regular expression only works with uncompressed version (not works with "font-awesome.min.css")
        $pattern = '/.(fa-(?:w+(?:-)?)+):befores+{s*content:s*"\(.+)";s+}/';

        if (preg_match_all($pattern,$fontAwesome,PREG_SET_ORDER)) {
            foreach ($matches as list(,$class,$code)) {
                // this may vary depending on the version of Symfony,// if the class name is displayed instead of the icon then swap the key/value
                $this->choices['&#x'.$code.';'] = $class;
            }
        }

        return $this->choices;

    }
}

和他们各自的注册服务：

# app/config/service.yml
services:
    app.form.icon_choice_type:
        class: AppBundleFormTypeChoiceIconType
        # Symfony has already a container parameter to the kernel root directory.
        arguments: ['%kernel.root_dir%']
        tags:
            - { name: form.type }

好吧,到目前为止,没有任何结果与你的不同.

<select id="form_icon" name="form[icon]" style="font-family: 'FontAwesome';">
    <option value="fa-glass">&#xf000;</option>
    <option value="fa-music">&#xf001;</option>
    ...
</select>

现在问题在哪里？ < select>字体系列已准备就绪,但是它们没有显示的图标,为什么？

默认情况下,在Symfony中,Twig环境会转义使用htmlspecialchars(more details)呈现的所有值,因此我们只需要为此表单类型覆盖此行为.为此,我们在app / Resources / views / form目录中创建了fields.html.twig模板,并将此代码复制到：

{# app/Resources/views/form/fields.html.twig #}

{# 
   here isn't need to create the expected `icon_choice_widget` like shown 
   the documentation,because this looks equal to `choice_widget` from 
   `ChoiceType`,only we need overwrite the block that renders the label. 
 #}

{%- block choice_widget_options -%}
    {% for group_label,choice in options %}
        {%- if choice is iterable -%}
            <optgroup label="{{ choice_translation_domain is same as(false) ? group_label : group_label|trans({},choice_translation_domain) }}">
                {% set options = choice %}
                {{- block('choice_widget_options') -}}
            </optgroup>
        {%- else -%}

            {# this line has been overwritten,see {{- block('choice_option_label') -}} to end #}
            <option value="{{ choice.value }}"{% if choice.attr %} {% set attr = choice.attr %}{{ block('attributes') }}{% endif %}{% if choice is selectedchoice(value) %} selected="selected"{% endif %}>{{- block('choice_option_label') -}}</option>

        {%- endif -%}
    {% endfor %}
{%- endblock choice_widget_options -%}

{%- block choice_option_label -%}
    {# this block has been called from choice_widget_options block #}

    {%- if raw_label|default(false) -%}
        {# the label is rendered as raw when IconChoiceType is used #}
        {{ choice_translation_domain is same as(false) ? choice.label|raw : choice.label|trans({},choice_translation_domain)|raw }}
    {%- else -%}
        {{ choice_translation_domain is same as(false) ? choice.label : choice.label|trans({},choice_translation_domain) }}
    {%- endif -%}
{%- endblock -%}

请注意,{{choice.label | raw}} raw filter将存储的原始文本(防止被转义)显示为标签,在本例中为图标字体内容.

最后,你需要注册表格主题,如描述documentation：

# app/config/config.yml

{# ... #}

twig:
    form_themes:
        - 'form/fields.html.twig'

结论：

$form->add('icon',IconChoiceType::class);