KnpMenuBundle添加图标/字形图标

Question

我曾尝试在knpMenuBundle生成的菜单链接旁边设置一个图标，但没有办法获得它。

我找到了一些像->setAttribute或->setExtra这样的解决方案，但我不能让它工作。

我必须在knp的基本模板中添加特定的行吗？

在细枝渲染中做一些特殊的事情吗？

这是我到目前为止尝试过的：

//Builder.php

$public function mainMenu(FactoryInterface $factory, array $options)
{
    $menu = $factory->createItem('root');
    $menu->setChildrenAttribute('class', 'nav navbar-nav ');

        $menu->addChild('Mes Informations',['route' => 'espace_client_mesInformations'])
            ->setAttribute('icon','fa fa-home');

        $menu->addChild('Mes Factures', array('route' => 'espace_client_mesFactures'));

        $menu->addChild('Mon Extrait de Compte', array('route' => 'espace_client_mesReglements'));

        $menu->addChild('Mes Services', array('route' => 'espace_client_mesServices'));

        $menu->addChild('Mes Consommations', array('route' => 'espace_client_mesConsommations'));

            $menu['Mes Consommations']->addChild('Télephone', array('route' => 'espace_client_mesConsoTelephone'));
            $menu['Mes Consommations']->addChild('Internet', array('route' => 'espace_client_mesConsoInternet'));

        $menu->addChild('Mes Liens Directs', array('route' => 'espace_client_mesLiens'));

    return $menu;
}

//menu.html.twig

<div class="panel panel-default">
<div class="panel-heading">
    <center><h4> Menu </h4></center>
</div>
    <div class="panel-body">

    {{ knp_menu_render('EspaceClientBundle:Builder:mainMenu',{'currentAsLink':false, 'template': 'EspaceClientBundle:Menu:knp_menu.html.twig'}) }}

    </div>

​

如果有人有答案的话？谢谢。

编辑：

我对捆绑包中的不同文件感到有点困惑，我一定是在php代码中遇到了问题，所以才有了它们的内容：

//knp_menu.html.twig：

            {% extends 'knp_menu_base.html.twig' %}

        {% macro attributes(attributes) %}
        {% for name, value in attributes %}
            {%- if value is not none and value is not same as(false) -%}
                {{- ' %s="%s"'|format(name, value is same as(true) ? name|e : value|e)|raw -}}
            {%- endif -%}
        {%- endfor -%}
        {% endmacro %}

        {% block compressed_root %}
        {% spaceless %}
        {{ block('root') }}
        {% endspaceless %}
        {% endblock %}

        {% block root %}
        {% set listAttributes = item.childrenAttributes %}
        {{ block('list') -}}
        {% endblock %}

        {% block list %}
        {% if item.hasChildren and options.depth is not same as(0) and item.displayChildren %}
            {% import _self as knp_menu %}
            <ul{{ knp_menu.attributes(listAttributes) }}>
                {{ block('children') }}
            </ul>
        {% endif %}
        {% endblock %}

        {% block children %}
        {# save current variables #}
        {% set currentOptions = options %}
        {% set currentItem = item %}
        {# update the depth for children #}
        {% if options.depth is not none %}
        {% set options = options|merge({'depth': currentOptions.depth - 1}) %}
        {% endif %}
        {# update the matchingDepth for children #}
        {% if options.matchingDepth is not none and options.matchingDepth > 0 %}
        {% set options = options|merge({'matchingDepth': currentOptions.matchingDepth - 1}) %}
        {% endif %}
        {% for item in currentItem.children %}
            {{ block('item') }}
        {% endfor %}
        {# restore current variables #}
        {% set item = currentItem %}
        {% set options = currentOptions %}
        {% endblock %}

        {% block item %}
        {% if item.displayed %}
        {# building the class of the item #}
            {%- set classes = item.attribute('class') is not empty ? [item.attribute('class')] : [] %}
            {%- if matcher.isCurrent(item) %}
                {%- set classes = classes|merge([options.currentClass]) %}
            {%- elseif matcher.isAncestor(item, options.matchingDepth) %}
                {%- set classes = classes|merge([options.ancestorClass]) %}
            {%- endif %}
            {%- if item.actsLikeFirst %}
                {%- set classes = classes|merge([options.firstClass]) %}
            {%- endif %}
            {%- if item.actsLikeLast %}
                {%- set classes = classes|merge([options.lastClass]) %}
            {%- endif %}

            {# Mark item as "leaf" (no children) or as "branch" (has children that are displayed) #}
            {% if item.hasChildren and options.depth is not same as(0) %}
                {% if options.branch_class is not empty and item.displayChildren %}
                    {%- set classes = classes|merge([options.branch_class]) %}
                {% endif %}
            {% elseif options.leaf_class is not empty %}
                {%- set classes = classes|merge([options.leaf_class]) %}
            {%- endif %}

            {%- set attributes = item.attributes %}
            {%- if classes is not empty %}
                {%- set attributes = attributes|merge({'class': classes|join(' ')}) %}
            {%- endif %}
        {# displaying the item #}
            {% import _self as knp_menu %}
            <li{{ knp_menu.attributes(attributes) }}>
                {%- if item.uri is not empty and (not matcher.isCurrent(item) or options.currentAsLink) %}
                {{ block('linkElement') }}
                {%- else %}
                {{ block('spanElement') }}
                {%- endif %}
        {# render the list of children#}
                {%- set childrenClasses = item.childrenAttribute('class') is not empty ? [item.childrenAttribute('class')] : [] %}
                {%- set childrenClasses = childrenClasses|merge(['menu_level_' ~ item.level]) %}
                {%- set listAttributes = item.childrenAttributes|merge({'class': childrenClasses|join(' ') }) %}
                {{ block('list') }}
            </li>
        {% endif %}
        {% endblock %}

        {% block linkElement %}
            {% import "knp_menu.html.twig" as macros %}
            <a href="{{ item.uri }}"{{ macros.attributes(item.linkAttributes) }}>
                <span class="icon">{{ item.getExtra('icon') }}</span>
                <span class="entry">{{ block('label') }}</span>
            </a>
        {% endblock %}

        {% block spanElement %}{% import _self as knp_menu %}<span{{ knp_menu.attributes(item.labelAttributes) }}>{{ block('label') }}</span>{% endblock %}

Answer 1

您应该编辑菜单模板EspaceClientBundle:Menu:knp_menu.html.twig，如下所示：

{% block label %}
    {% if options.allow_safe_labels and item.getExtra('safe_label', false) %}
        {{ item.label|raw|trans }}
    {% else %}
        {{ item.label }}
    {% endif %}
    {% if item.extras.icon is defined %}
        <i class="{{ item.extras.icon }}"></i>
    {% endif %}
{% endblock %}

我建议您删除小枝标记之间的空格。

然后，在菜单生成器中：

$menu->addChild('Mes Informations', [
    'route' => 'espace_client_mesInformations',
    'extras' => ['icon' => 'fa fa-home']
]);