Icons not showing with MopaBootstrapBundle and FontAwesome

Question

I am trying to build a menu with icons for each element.

I am using (or trying to)

• MopaBootstrapBundle
• KnpMenuBundle
• FontAwesome

The menu structure is displaying and working fine, but the icons are not showing. Can anyone put me on the right tracks here?

Here's what I've done so far:

Setting up config.yml:

assetic:
    debug:          "%kernel.debug%"
    use_controller: false
    filters:
        cssrewrite: ~
        cssembed:
            jar: %kernel.root_dir%/Resources/java/cssembed.jar
            apply_to: "\.css$|\.less$"
        yui_css:
            jar: "%kernel.root_dir%/Resources/java/yuicompressor.jar"
        yui_js:
            jar: "%kernel.root_dir%/Resources/java/yuicompressor.jar"

[...]

mopa_bootstrap:
    form: ~  # Adds twig form theme  support
    menu: ~  # enables twig helpers for menu
    icons:
        icon_set: fontawesome4
        shortcut: icon

Including bootstrap styles in my /app/Resources/MopaBootstrapBundle/views/layout.html.twig

{%  block head_style %}
    {{  parent() }}
    {% stylesheets filter='less,cssrewrite,?yui_css'
    'bundles/mopabootstrap/less/mopabootstrapbundle-fa4.less'
    %}
    <link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
    {% endstylesheets %}

{%  endblock head_style %}

Building my menu:

public function createMainMenu(FactoryInterface $factory, array $options)
    {
        $menu = $factory->createItem(
        'root', array(
            'navbar' => true,
            )
        );

        // Main Menu -> Config
        $menu->addChild('Item 1', array(
                'route' => 'home',
                'caret' => true,
                'icon' => 'fa-home',
            )
        );

        $dropdown = $menu->addChild('Item 2', array(
                'dropdown' => true,
                'caret' => true,
                'icon' => 'fa-archive',
            )
        );
        $dropdown->addChild('Sub-item 1', array('route' => 'si1'));
        $dropdown->addChild('Sub-item 2', array('route' => 'si2'));
        $dropdown->addChild('Sub-item 3', array('route' => 'si3'));

        return $menu;

    }

Looking at the page source, I found all classes to be set correctly. However, in the linked style sheets, I found this:

/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: 'FontAwesome';
  src: url(../../bundles/mopabootstrap/fonts/fontawesome-webfont.eot?v=4.2.0);
  src: url(../../bundles/mopabootstrap/fonts/fontawesome-webfont.eot?#iefix&v=4.2.0) format('embedded-opentype'), url(../../bundles/mopabootstrap/fonts/fontawesome-webfont.woff?v=4.2.0) format('woff'), url(../../bundles/mopabootstrap/fonts/fontawesome-webfont.ttf?v=4.2.0) format('truetype'), url(../../bundles/mopabootstrap/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular) format('svg');
  font-weight: normal;
  font-style: normal;
}

The path ../../bundles/mopabootstrap/fonts/ does not appear to exist in my setup, which would explain the missing icons. I cannot figure out, however, how I can modify it.

In the documentation, I found a reference to the @icon-font-path variable definition. I am at a bit of a loss as to where to define it and with which value.

NB: The font files do reside in my web/fonts folder. All this is happening on a Windows machine.

UPDATE:

I am finding the FontAwesome files in these locations:

• <my_project_path>\web\bundles\mopabootstrap\fonts\fa4
• <my_project_path>\web\fonts

Only the Glyphicon font files can be found in

• <my_project_path>\web\bundles\mopabootstrap\bootstrap\fonts.

I also noticed that when I define @icon-font-path: "../fonts/"; in /src/<my_bundle>/Resources/public/less/mystyles.less the path in the resulting CSS file is src: url('../fonts/fontawesome-webfont.eot?v=4.2.0');

However, when I load my app and call up the CCS file dumped by assetic, the path is src: url(../../Resources/public/fonts/fontawesome-webfont.eot?v=4.2.0);

Answer 1

Change in vendor/mopa/bootstrap-bundle/Mopa/BootstrapBundle/Resources/public/less/font-awesome4/variables.less

@fa-font-path: "../fonts/";

by

@fa-font-path: "../fonts/fa4";

Answer 2

I know that it is an old post, but I had the same problem, the same configuration files and i found the solution.

These lines are wrong :

'icon' => 'fa-home',

You have to replace all of them by :

'icon' => 'home',

Don't use the prefixe fa- ;)

You will see the glyphicon icon if in your configuration file you have :

mopa_bootstrap:
    form: ~  # Adds twig form theme  support
    menu: ~  # enables twig helpers for menu
    icons:
        icon_set: glyphicon #Use the glyph icons
        shortcut: icon

And you will see the fontawwesome icon if you replace glyphicon by fontawesome (this is my issue) but never use the "fa-" prefix.

mopa_bootstrap:
    form: ~  # Adds twig form theme  support
    menu: ~  # enables twig helpers for menu
    icons:
        icon_set: fontawesome4 #Use the fontawesome4 icons
        shortcut: icon