我可以帮助您翻译以下内容: 我希望在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等),但都没有起作用。
如果您没有使用像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"></option> <option value="fa-music"></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的答案是正确的并且有其存在的意义,但我认为对于像在表单上放置图标这样简单的事情来说,它太过复杂了。因此,对于新访客,我提供我的版本。 在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 }