如何在Symfony表单选择器中显示Font Awesome图标

Question

我可以帮助您翻译以下内容：

我希望在Symfony表单构建器中显示所有字体图标的选择选项。

我使用以下代码添加选择字段：

$choices = $this->getFontAwesome();
$form->add( $key, ChoiceType::class, array('label' => 'Texte', 'choices' => $choices, 'attr' => array('class' => "fa" ) ) );

我的函数getFontAwesome();

    public function getFontAwesome(){

    $webroot = $this->get('kernel')->getRootDir() . '/../web';
    $pattern = '/\.(fa-(?:\w+(?:-)?)+):before\s+{\s*content:\s*"\\\\(.+)";\s+}/';
    $subject =  file_get_contents( $webroot . '/assets/vendor/font-awesome/css/font-awesome.css');
    preg_match_all($pattern, $subject, $matches, PREG_SET_ORDER);
    foreach($matches as $match) {
        $icons[$match[1]] = '&#x' . $match[2] . ';' ;
    }

    return $icons ;

}

但是在选择字段中，看不到图标：

字段显示代码而不是图标

我该怎么办？ 我尝试使用htmlspecialschars和其他方法（htmlentities等），但都没有起作用。

- OcB974

---

你正在使用select2插件吗？ - yceruto

Answer 1

如果您没有使用像Select2或Bootstrap-select这样的js插件，那么您可以使用http://jsfiddle.net/NyL7d/这个方法，但我们需要做一些工作才能实现它。

首先，使用<i class ="fa fa-heart"></i>作为标签是不可行的，因为元素不能包含任何子元素，只能有文本。（参见相关问题）

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

namespace AppBundle\Form\Type;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
use Symfony\Component\Form\FormInterface;
use Symfony\Component\Form\FormView;
use Symfony\Component\OptionsResolver\OptionsResolver;

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+(?:-)?)+):before\s+{\s*content:\s*"\\\\(.+)";\s+}/';

        if (preg_match_all($pattern, $fontAwesome, $matches, 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: AppBundle\Form\Type\ChoiceIconType
        # 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（更多详情）转义所有渲染出的值，因此我们需要仅覆盖此表单类型的该行为。为此，我们在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 过滤器 显示存储的原始文本（它可以防止被转义）到 label 中，这里是图标字体内容。

最后，按照文档所述，您需要注册表单主题。

# app/config/config.yml

{# ... #}

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

结论：

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

- yceruto

Answer 2

我知道这是一个相当古老的帖子，@yceruto的答案是正确的并且有其存在的意义，但我认为对于像在表单上放置图标这样简单的事情来说，它太过复杂了。因此，对于新访客，我提供我的版本。

在formBilder中

public function buildForm(FormBuilderInterface $builder, array $options)
{
    // prepare an array with icons
    $icons =  [
        '',
        '',
    ];
    
    // decode our icons
    $icons = array_flip(array_map('html_entity_decode',$icons));
    
    // add field to formBuilder
    $builder->add('icon', ChoiceType::class, [
        'choices'  => $icons,
        'mapped' => false,
    ]);

}

在你的页面中引入FontAwesome库并添加CSS样式。

select { font-family: 'FontAwesome', serif }

- emrdev