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

如果您没有使用任何js插件,如

Select2或

Bootstrap-select,那么您有

http://jsfiddle.net/NyL7d/这种可能性,但我们需要稍微努力才能达到它.

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

为了可重用性,让我们构建一个名为“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 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[''.$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>字体系列已准备就绪,但是它们没有显示的图标,为什么？

默认情况下,在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 -%}

{% set options = choice %}

{{- block('choice_widget_options') -}}

{%- else -%}

{# this line has been overwritten, see {{- block('choice_option_label') -}} to end #}

{{- block('choice_option_label') -}}

{%- 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);