MopaBootstrapBundle 和 FontAwesome 未显示图标答案

【问题标题】：Icons not showing with MopaBootstrapBundle and FontAwesomeMopaBootstrapBundle 和 FontAwesome 未显示图标
【发布时间】：2014-11-30 12:05:38
【问题描述】：

我正在尝试为每个元素构建一个带有图标的菜单。

我正在使用（或尝试）

MopaBootstrapBundle
KnpMenuBundle
FontAwesome

菜单结构显示正常，但图标未显示。谁能在这里让我走上正确的轨道？

这是我到目前为止所做的：

设置 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

在我的/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 %}

构建我的菜单：

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;

    }

查看页面源，我发现所有类都设置正确。但是，在链接的样式表中，我发现了这个：

/* 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;
}

路径../../bundles/mopabootstrap/fonts/ 在我的设置中似乎不存在，这可以解释缺少的图标。但是，我不知道如何修改它。

在documentation 中，我找到了对@icon-font-path 变量定义的引用。我不知道在哪里定义它以及使用哪个值。

注意：字体文件确实位于我的web/fonts 文件夹中。这一切都发生在 Windows 机器上。

更新：

我在以下位置找到 FontAwesome 文件：

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

只有 Glyphicon 字体文件可以在

中找到

<my_project_path>\web\bundles\mopabootstrap\bootstrap\fonts。

我还注意到，当我在 /src/<my_bundle>/Resources/public/less/mystyles.less 中定义 @icon-font-path: "../fonts/"; 时，生成的 CSS 文件中的路径是 src: url('../fonts/fontawesome-webfont.eot?v=4.2.0');

但是，当我加载我的应用程序并调用由assetic转储的CCS文件时，路径是src: url(../../Resources/public/fonts/fontawesome-webfont.eot?v=4.2.0);

【问题讨论】：

试试app/console assets:install。那应该创建/bundles/etc 目录。将--symlink 用于符号链接而不是副本。
我跑了app/console assets:install，但没有任何改变。
添加了我目前可以在哪里找到字体文件的更新

标签： twitter-bootstrap symfony knpmenubundle

【解决方案1】：

vendor/mopa/bootstrap-bundle/Mopa/BootstrapBundle/Resources/public/less/font-awesome4/variables.less 的变化

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

通过

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

【讨论】：

【解决方案2】：

我知道这是一个旧帖子，但我遇到了同样的问题，同样的配置文件，我找到了解决方案。

这些行是错误的：

'icon' => 'fa-home',

您必须将它们全部替换为：

'icon' => 'home',

不要使用前缀 fa- ;)

如果在您的配置文件中，您将看到字形图标：

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

如果您将 glyphicon 替换为 fontawesome（这是我的问题），但从不使用“fa-”前缀，您将看到 fontawwesome 图标。

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

【讨论】：