Как отобразить значок шрифта в форме Symfony выберите

Если вы не используете какие-либо плагины JS, такие как выбор2 или же Bootstrap-выберите, тогда у вас есть http://jsfiddle.net/NyL7d/ такая возможность, но нам нужно немного поработать, чтобы ее достичь.

Во-первых, сказать, что с помощью <i class="fa fa-heart"></i> поскольку ярлык не является выбором, потому что <option> Элемент не может иметь дочерних элементов, но только текст. (см связанный вопрос)

Для возможности повторного использования давайте создадим тип формы с именем «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 (больше деталей), поэтому нам нужно переписать это поведение только для этого типа формы. Для этого мы создаем fields.html.twig шаблон в app/Resources/views/form каталог и скопируйте этот код внутри:

{# 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 }} сырой фильтр отображает необработанный текст, сохраненный (он не может быть экранирован) в метку, в данном случае содержимое шрифта значка.

наконец, вам нужно зарегистрировать тему формы, как описать документация:

# app/config/config.yml

{# ... #}

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

Заключение:

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